admin管理员组文章数量:1022956
I'm trying to make an animated speech bubble using svgs but I've noticing that the anti-aliasing on the strokes lacks sharpness and has a distinct smudge to it. I've tried fixing the problem by rounding my calculations but that only made the smudging worse - What can I do to get hard 1px thick black lines?
HTML:
<div id="inset">
<svg id="svg" width="100%" height="100%"></svg>
</div>
CSS:
body, html {
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
}
#inset {
width: 20%;
height: 50%;
position: absolute;
bottom: 0;
left: 50%;
}
#svg {
}
Javascipt:
$(function() {
var sponsorBubble = function(el, html, cornerRad) {
this.html = html,
this.width = el.parent().width(),
this.x_center = (el.parent().width()/2),
this.height = el.parent().height(),
this.arrowWidth = (el.parent().width()/4),
this.arrowHeight = (el.parent().height()/8),
this.cornerRad = cornerRad,
this.arrowRad = this.cornerRad/3,
this.arrowControlRatio = this.arrowRad * ((this.arrowWidth/2 - (this.arrowRad*2)) / (this.arrowHeight - (this.arrowRad*2)));
var bubble = s.path(
"M" +
Math.round(this.x_center)
+ ", " +
Math.round(this.height)
+ ", Q" +
Math.round(this.x_center - this.arrowRad)
+ ", " +
Math.round(this.height)
+ ", " +
Math.round(this.x_center - this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowRad)
+ ", Q" +
Math.round(this.x_center - this.arrowRad)
+ ", " +
Math.round(this.height - (this.arrowRad*2))
+ ", " +
Math.round(this.x_center)
+ ", " +
Math.round(this.height - (this.arrowRad*2))
+ ", Q" +
Math.round(this.x_center + this.arrowRad)
+ ", " +
Math.round(this.height - (this.arrowRad*2))
+ ", " +
Math.round(this.x_center + this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowRad)
+ ", Q" +
Math.round(this.x_center + this.arrowRad)
+ ", " +
Math.round(this.height)
+ ", " +
Math.round(this.x_center)
+ ", " +
Math.round(this.height)
+ ", Z"
);
bubble.attr({
stroke: 'black',
fill: 'none'
});
bubble.animate({
d:
"M" +
Math.round(this.x_center)
+ ", " +
Math.round(this.height)
+ ", Q" +
Math.round(this.x_center - this.arrowRad + this.arrowControlRatio)
+ ", " +
Math.round(this.height)
+ ", " +
Math.round(this.x_center - this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowRad)
+ ", L" +
Math.round(this.x_center - (this.arrowWidth/2) + this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowHeight + this.arrowRad)
+ ", Q" +
Math.round(this.x_center - (this.arrowWidth/2) + this.arrowRad - this.arrowControlRatio)
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", " +
Math.round(this.x_center - (this.arrowWidth/2))
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", L" +
Math.round(this.cornerRad)
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", Q" +
0
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", " +
0
+ ", " +
Math.round(this.height - this.arrowHeight - this.cornerRad)
+ ", L" +
0
+ ", " +
Math.round(this.cornerRad)
+ ", Q" +
0
+ ", " +
0
+ ", " +
Math.round(this.cornerRad)
+ ", " +
0
+ ", L" +
Math.round(this.width - this.cornerRad)
+ ", " +
0
+ ", Q" +
Math.round(this.width)
+ ", " +
0
+ ", " +
Math.round(this.width)
+ ", " +
Math.round(this.cornerRad)
+ ", L" +
Math.round(this.width)
+ ", " +
Math.round(this.height - this.arrowHeight - this.cornerRad)
+ ", Q" +
Math.round(this.width)
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", " +
Math.round(this.width - this.cornerRad)
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", L" +
Math.round(this.x_center + (this.arrowWidth/2))
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", Q" +
Math.round(this.x_center + (this.arrowWidth/2) - this.arrowRad + this.arrowControlRatio)
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", " +
Math.round(this.x_center + (this.arrowWidth/2) - this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowHeight + this.arrowRad)
+ ", L" +
Math.round(this.x_center + this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowRad)
+ ", Q" +
Math.round(this.x_center + this.arrowRad - this.arrowControlRatio)
+ ", " +
Math.round(this.height)
+ ", " +
Math.round(this.x_center)
+ ", " +
Math.round(this.height)
+ ", Z"
},
100
);
};
s = Snap('#svg');
var bubble_obj = new sponsorBubble($('#svg'), "test_content", 15);
});
jdfiddle: /
I'm trying to make an animated speech bubble using svgs but I've noticing that the anti-aliasing on the strokes lacks sharpness and has a distinct smudge to it. I've tried fixing the problem by rounding my calculations but that only made the smudging worse - What can I do to get hard 1px thick black lines?
HTML:
<div id="inset">
<svg id="svg" width="100%" height="100%"></svg>
</div>
CSS:
body, html {
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
}
#inset {
width: 20%;
height: 50%;
position: absolute;
bottom: 0;
left: 50%;
}
#svg {
}
Javascipt:
$(function() {
var sponsorBubble = function(el, html, cornerRad) {
this.html = html,
this.width = el.parent().width(),
this.x_center = (el.parent().width()/2),
this.height = el.parent().height(),
this.arrowWidth = (el.parent().width()/4),
this.arrowHeight = (el.parent().height()/8),
this.cornerRad = cornerRad,
this.arrowRad = this.cornerRad/3,
this.arrowControlRatio = this.arrowRad * ((this.arrowWidth/2 - (this.arrowRad*2)) / (this.arrowHeight - (this.arrowRad*2)));
var bubble = s.path(
"M" +
Math.round(this.x_center)
+ ", " +
Math.round(this.height)
+ ", Q" +
Math.round(this.x_center - this.arrowRad)
+ ", " +
Math.round(this.height)
+ ", " +
Math.round(this.x_center - this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowRad)
+ ", Q" +
Math.round(this.x_center - this.arrowRad)
+ ", " +
Math.round(this.height - (this.arrowRad*2))
+ ", " +
Math.round(this.x_center)
+ ", " +
Math.round(this.height - (this.arrowRad*2))
+ ", Q" +
Math.round(this.x_center + this.arrowRad)
+ ", " +
Math.round(this.height - (this.arrowRad*2))
+ ", " +
Math.round(this.x_center + this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowRad)
+ ", Q" +
Math.round(this.x_center + this.arrowRad)
+ ", " +
Math.round(this.height)
+ ", " +
Math.round(this.x_center)
+ ", " +
Math.round(this.height)
+ ", Z"
);
bubble.attr({
stroke: 'black',
fill: 'none'
});
bubble.animate({
d:
"M" +
Math.round(this.x_center)
+ ", " +
Math.round(this.height)
+ ", Q" +
Math.round(this.x_center - this.arrowRad + this.arrowControlRatio)
+ ", " +
Math.round(this.height)
+ ", " +
Math.round(this.x_center - this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowRad)
+ ", L" +
Math.round(this.x_center - (this.arrowWidth/2) + this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowHeight + this.arrowRad)
+ ", Q" +
Math.round(this.x_center - (this.arrowWidth/2) + this.arrowRad - this.arrowControlRatio)
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", " +
Math.round(this.x_center - (this.arrowWidth/2))
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", L" +
Math.round(this.cornerRad)
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", Q" +
0
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", " +
0
+ ", " +
Math.round(this.height - this.arrowHeight - this.cornerRad)
+ ", L" +
0
+ ", " +
Math.round(this.cornerRad)
+ ", Q" +
0
+ ", " +
0
+ ", " +
Math.round(this.cornerRad)
+ ", " +
0
+ ", L" +
Math.round(this.width - this.cornerRad)
+ ", " +
0
+ ", Q" +
Math.round(this.width)
+ ", " +
0
+ ", " +
Math.round(this.width)
+ ", " +
Math.round(this.cornerRad)
+ ", L" +
Math.round(this.width)
+ ", " +
Math.round(this.height - this.arrowHeight - this.cornerRad)
+ ", Q" +
Math.round(this.width)
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", " +
Math.round(this.width - this.cornerRad)
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", L" +
Math.round(this.x_center + (this.arrowWidth/2))
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", Q" +
Math.round(this.x_center + (this.arrowWidth/2) - this.arrowRad + this.arrowControlRatio)
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", " +
Math.round(this.x_center + (this.arrowWidth/2) - this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowHeight + this.arrowRad)
+ ", L" +
Math.round(this.x_center + this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowRad)
+ ", Q" +
Math.round(this.x_center + this.arrowRad - this.arrowControlRatio)
+ ", " +
Math.round(this.height)
+ ", " +
Math.round(this.x_center)
+ ", " +
Math.round(this.height)
+ ", Z"
},
100
);
};
s = Snap('#svg');
var bubble_obj = new sponsorBubble($('#svg'), "test_content", 15);
});
jdfiddle: http://jsfiddle/L5k48hwm/
Share Improve this question asked Sep 29, 2014 at 0:42 tomctomc 4275 silver badges17 bronze badges2 Answers
Reset to default 3svg path { // or rect, circle, etc
shape-rendering: crispEdges;
}
Having said that, you can try using jQuery UI .animate() to create similar effect like this jsfiddle example (reverse this animation to match your specs). This avoid the plex path generation and smoother lines.
Update: here's the code snippet.
$('div').append('<svg xmlns:svg="http://www.w3/2000/svg" xmlns="http://www.w3/2000/svg" version="1.1" x="0.00000000" y="0.00000000" width="100%" height="100%" id="svg3" viewbox="0 0 1000 600" > <path fill="#FFFFFF" stroke="#000000" stroke-width="10" d="M916.902,397.331c14.126,0,17.344-9.739,17.344-9.739 c0-27.635,7.992-42.357,26.927-42.357c0,0,13.702,1.668,13.702-14.946c0-0.001,0.619-43.408-1.901-141.244 c-2.514-97.836-9.537-109.333-9.537-109.333c0-14.125-9.129-13.284-9.129-13.284c-24.67,0-53.406,4.151-53.406-30.893 c0,0,1.558-11.866-15.041-11.866c0,0-159.78-14.301-423.823-14.301c-264.041,0-375.12,2.352-375.12,2.352 c-14.125,0-13.284,9.136-13.284,9.136c0,22.479-13.575,42.622-30.319,42.622c0,0-13.705,0.341-13.705,16.949 c0,0-4.551,60.914-4.551,117.724c0,56.808,4.551,126.899,4.551,126.899c0,14.125,9.127,13.28,9.127,13.28 c24.9,0,29.944,10.568,29.944,30.322c0,0,1.038,15.744,25.709,15.744l248.677,5.155c0,0,46.81,25.855,64.76,39.665 c17.952,13.808,27.714,26.235,12.526,41.426c-6.669,6.666-11.966,12.474-9.571,21.187c2.277,8.256,26.797,22.168,29.903,23.746 c0.261,0.127,61.957,30.323,84.796,41.37c16.646,8.047,33.288,16.074,49.292,25.362c2.152,1.253,14.271,9.614,16.804,7.089 c2.484-2.479-11.174-12.959-12.823-14.315c-9.084-7.442-16.206-16.462-24.158-25.027c-12.481-13.465-25.133-26.788-37.746-40.133 c-7.044-7.464-13.884-15.167-21.144-22.43c-1.791-1.79-1.476-4.571,0.699-7.001c7.682-8.531,25.246-28.013,27.384-30.14 c2.739-2.731-1.814-7.121-1.814-7.121l-62.959-51.678L916.902,397.331z"/> </svg>');
$('div').draggable({
handle: 'rect'
});
$('div').animate({
width: "500px",
height: "300px",
top: "0px",
left: "0px"
}, 2000).animate({
width: "100px",
height: "60px",
top: "240px",
left: "230px"
}, 2000);<script src="//ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis./ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<div style="width:100px; height:60px; border:solid thin #888; padding:0px; border-radius:4px; background-color:yellow; top:240px; left:230px">
</div>I think to get nice curved corners, you will need to do two things:
- Improve your path generation algorithm. This is because when you zoom in on your SVG, you can see that the path width gets bigger on the corners. I don't have the time or expertise to help with this one.
- Try using different values for the
shape-renderingCSS property. They can give you significantly crisper rendering.
I'm trying to make an animated speech bubble using svgs but I've noticing that the anti-aliasing on the strokes lacks sharpness and has a distinct smudge to it. I've tried fixing the problem by rounding my calculations but that only made the smudging worse - What can I do to get hard 1px thick black lines?
HTML:
<div id="inset">
<svg id="svg" width="100%" height="100%"></svg>
</div>
CSS:
body, html {
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
}
#inset {
width: 20%;
height: 50%;
position: absolute;
bottom: 0;
left: 50%;
}
#svg {
}
Javascipt:
$(function() {
var sponsorBubble = function(el, html, cornerRad) {
this.html = html,
this.width = el.parent().width(),
this.x_center = (el.parent().width()/2),
this.height = el.parent().height(),
this.arrowWidth = (el.parent().width()/4),
this.arrowHeight = (el.parent().height()/8),
this.cornerRad = cornerRad,
this.arrowRad = this.cornerRad/3,
this.arrowControlRatio = this.arrowRad * ((this.arrowWidth/2 - (this.arrowRad*2)) / (this.arrowHeight - (this.arrowRad*2)));
var bubble = s.path(
"M" +
Math.round(this.x_center)
+ ", " +
Math.round(this.height)
+ ", Q" +
Math.round(this.x_center - this.arrowRad)
+ ", " +
Math.round(this.height)
+ ", " +
Math.round(this.x_center - this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowRad)
+ ", Q" +
Math.round(this.x_center - this.arrowRad)
+ ", " +
Math.round(this.height - (this.arrowRad*2))
+ ", " +
Math.round(this.x_center)
+ ", " +
Math.round(this.height - (this.arrowRad*2))
+ ", Q" +
Math.round(this.x_center + this.arrowRad)
+ ", " +
Math.round(this.height - (this.arrowRad*2))
+ ", " +
Math.round(this.x_center + this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowRad)
+ ", Q" +
Math.round(this.x_center + this.arrowRad)
+ ", " +
Math.round(this.height)
+ ", " +
Math.round(this.x_center)
+ ", " +
Math.round(this.height)
+ ", Z"
);
bubble.attr({
stroke: 'black',
fill: 'none'
});
bubble.animate({
d:
"M" +
Math.round(this.x_center)
+ ", " +
Math.round(this.height)
+ ", Q" +
Math.round(this.x_center - this.arrowRad + this.arrowControlRatio)
+ ", " +
Math.round(this.height)
+ ", " +
Math.round(this.x_center - this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowRad)
+ ", L" +
Math.round(this.x_center - (this.arrowWidth/2) + this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowHeight + this.arrowRad)
+ ", Q" +
Math.round(this.x_center - (this.arrowWidth/2) + this.arrowRad - this.arrowControlRatio)
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", " +
Math.round(this.x_center - (this.arrowWidth/2))
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", L" +
Math.round(this.cornerRad)
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", Q" +
0
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", " +
0
+ ", " +
Math.round(this.height - this.arrowHeight - this.cornerRad)
+ ", L" +
0
+ ", " +
Math.round(this.cornerRad)
+ ", Q" +
0
+ ", " +
0
+ ", " +
Math.round(this.cornerRad)
+ ", " +
0
+ ", L" +
Math.round(this.width - this.cornerRad)
+ ", " +
0
+ ", Q" +
Math.round(this.width)
+ ", " +
0
+ ", " +
Math.round(this.width)
+ ", " +
Math.round(this.cornerRad)
+ ", L" +
Math.round(this.width)
+ ", " +
Math.round(this.height - this.arrowHeight - this.cornerRad)
+ ", Q" +
Math.round(this.width)
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", " +
Math.round(this.width - this.cornerRad)
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", L" +
Math.round(this.x_center + (this.arrowWidth/2))
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", Q" +
Math.round(this.x_center + (this.arrowWidth/2) - this.arrowRad + this.arrowControlRatio)
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", " +
Math.round(this.x_center + (this.arrowWidth/2) - this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowHeight + this.arrowRad)
+ ", L" +
Math.round(this.x_center + this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowRad)
+ ", Q" +
Math.round(this.x_center + this.arrowRad - this.arrowControlRatio)
+ ", " +
Math.round(this.height)
+ ", " +
Math.round(this.x_center)
+ ", " +
Math.round(this.height)
+ ", Z"
},
100
);
};
s = Snap('#svg');
var bubble_obj = new sponsorBubble($('#svg'), "test_content", 15);
});
jdfiddle: /
I'm trying to make an animated speech bubble using svgs but I've noticing that the anti-aliasing on the strokes lacks sharpness and has a distinct smudge to it. I've tried fixing the problem by rounding my calculations but that only made the smudging worse - What can I do to get hard 1px thick black lines?
HTML:
<div id="inset">
<svg id="svg" width="100%" height="100%"></svg>
</div>
CSS:
body, html {
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
}
#inset {
width: 20%;
height: 50%;
position: absolute;
bottom: 0;
left: 50%;
}
#svg {
}
Javascipt:
$(function() {
var sponsorBubble = function(el, html, cornerRad) {
this.html = html,
this.width = el.parent().width(),
this.x_center = (el.parent().width()/2),
this.height = el.parent().height(),
this.arrowWidth = (el.parent().width()/4),
this.arrowHeight = (el.parent().height()/8),
this.cornerRad = cornerRad,
this.arrowRad = this.cornerRad/3,
this.arrowControlRatio = this.arrowRad * ((this.arrowWidth/2 - (this.arrowRad*2)) / (this.arrowHeight - (this.arrowRad*2)));
var bubble = s.path(
"M" +
Math.round(this.x_center)
+ ", " +
Math.round(this.height)
+ ", Q" +
Math.round(this.x_center - this.arrowRad)
+ ", " +
Math.round(this.height)
+ ", " +
Math.round(this.x_center - this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowRad)
+ ", Q" +
Math.round(this.x_center - this.arrowRad)
+ ", " +
Math.round(this.height - (this.arrowRad*2))
+ ", " +
Math.round(this.x_center)
+ ", " +
Math.round(this.height - (this.arrowRad*2))
+ ", Q" +
Math.round(this.x_center + this.arrowRad)
+ ", " +
Math.round(this.height - (this.arrowRad*2))
+ ", " +
Math.round(this.x_center + this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowRad)
+ ", Q" +
Math.round(this.x_center + this.arrowRad)
+ ", " +
Math.round(this.height)
+ ", " +
Math.round(this.x_center)
+ ", " +
Math.round(this.height)
+ ", Z"
);
bubble.attr({
stroke: 'black',
fill: 'none'
});
bubble.animate({
d:
"M" +
Math.round(this.x_center)
+ ", " +
Math.round(this.height)
+ ", Q" +
Math.round(this.x_center - this.arrowRad + this.arrowControlRatio)
+ ", " +
Math.round(this.height)
+ ", " +
Math.round(this.x_center - this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowRad)
+ ", L" +
Math.round(this.x_center - (this.arrowWidth/2) + this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowHeight + this.arrowRad)
+ ", Q" +
Math.round(this.x_center - (this.arrowWidth/2) + this.arrowRad - this.arrowControlRatio)
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", " +
Math.round(this.x_center - (this.arrowWidth/2))
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", L" +
Math.round(this.cornerRad)
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", Q" +
0
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", " +
0
+ ", " +
Math.round(this.height - this.arrowHeight - this.cornerRad)
+ ", L" +
0
+ ", " +
Math.round(this.cornerRad)
+ ", Q" +
0
+ ", " +
0
+ ", " +
Math.round(this.cornerRad)
+ ", " +
0
+ ", L" +
Math.round(this.width - this.cornerRad)
+ ", " +
0
+ ", Q" +
Math.round(this.width)
+ ", " +
0
+ ", " +
Math.round(this.width)
+ ", " +
Math.round(this.cornerRad)
+ ", L" +
Math.round(this.width)
+ ", " +
Math.round(this.height - this.arrowHeight - this.cornerRad)
+ ", Q" +
Math.round(this.width)
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", " +
Math.round(this.width - this.cornerRad)
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", L" +
Math.round(this.x_center + (this.arrowWidth/2))
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", Q" +
Math.round(this.x_center + (this.arrowWidth/2) - this.arrowRad + this.arrowControlRatio)
+ ", " +
Math.round(this.height - this.arrowHeight)
+ ", " +
Math.round(this.x_center + (this.arrowWidth/2) - this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowHeight + this.arrowRad)
+ ", L" +
Math.round(this.x_center + this.arrowRad)
+ ", " +
Math.round(this.height - this.arrowRad)
+ ", Q" +
Math.round(this.x_center + this.arrowRad - this.arrowControlRatio)
+ ", " +
Math.round(this.height)
+ ", " +
Math.round(this.x_center)
+ ", " +
Math.round(this.height)
+ ", Z"
},
100
);
};
s = Snap('#svg');
var bubble_obj = new sponsorBubble($('#svg'), "test_content", 15);
});
jdfiddle: http://jsfiddle/L5k48hwm/
Share Improve this question asked Sep 29, 2014 at 0:42 tomctomc 4275 silver badges17 bronze badges2 Answers
Reset to default 3svg path { // or rect, circle, etc
shape-rendering: crispEdges;
}
Having said that, you can try using jQuery UI .animate() to create similar effect like this jsfiddle example (reverse this animation to match your specs). This avoid the plex path generation and smoother lines.
Update: here's the code snippet.
$('div').append('<svg xmlns:svg="http://www.w3/2000/svg" xmlns="http://www.w3/2000/svg" version="1.1" x="0.00000000" y="0.00000000" width="100%" height="100%" id="svg3" viewbox="0 0 1000 600" > <path fill="#FFFFFF" stroke="#000000" stroke-width="10" d="M916.902,397.331c14.126,0,17.344-9.739,17.344-9.739 c0-27.635,7.992-42.357,26.927-42.357c0,0,13.702,1.668,13.702-14.946c0-0.001,0.619-43.408-1.901-141.244 c-2.514-97.836-9.537-109.333-9.537-109.333c0-14.125-9.129-13.284-9.129-13.284c-24.67,0-53.406,4.151-53.406-30.893 c0,0,1.558-11.866-15.041-11.866c0,0-159.78-14.301-423.823-14.301c-264.041,0-375.12,2.352-375.12,2.352 c-14.125,0-13.284,9.136-13.284,9.136c0,22.479-13.575,42.622-30.319,42.622c0,0-13.705,0.341-13.705,16.949 c0,0-4.551,60.914-4.551,117.724c0,56.808,4.551,126.899,4.551,126.899c0,14.125,9.127,13.28,9.127,13.28 c24.9,0,29.944,10.568,29.944,30.322c0,0,1.038,15.744,25.709,15.744l248.677,5.155c0,0,46.81,25.855,64.76,39.665 c17.952,13.808,27.714,26.235,12.526,41.426c-6.669,6.666-11.966,12.474-9.571,21.187c2.277,8.256,26.797,22.168,29.903,23.746 c0.261,0.127,61.957,30.323,84.796,41.37c16.646,8.047,33.288,16.074,49.292,25.362c2.152,1.253,14.271,9.614,16.804,7.089 c2.484-2.479-11.174-12.959-12.823-14.315c-9.084-7.442-16.206-16.462-24.158-25.027c-12.481-13.465-25.133-26.788-37.746-40.133 c-7.044-7.464-13.884-15.167-21.144-22.43c-1.791-1.79-1.476-4.571,0.699-7.001c7.682-8.531,25.246-28.013,27.384-30.14 c2.739-2.731-1.814-7.121-1.814-7.121l-62.959-51.678L916.902,397.331z"/> </svg>');
$('div').draggable({
handle: 'rect'
});
$('div').animate({
width: "500px",
height: "300px",
top: "0px",
left: "0px"
}, 2000).animate({
width: "100px",
height: "60px",
top: "240px",
left: "230px"
}, 2000);<script src="//ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis./ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<div style="width:100px; height:60px; border:solid thin #888; padding:0px; border-radius:4px; background-color:yellow; top:240px; left:230px">
</div>I think to get nice curved corners, you will need to do two things:
- Improve your path generation algorithm. This is because when you zoom in on your SVG, you can see that the path width gets bigger on the corners. I don't have the time or expertise to help with this one.
- Try using different values for the
shape-renderingCSS property. They can give you significantly crisper rendering.
本文标签： javascriptStroke qualityantialiasing with svgStack Overflow
版权声明：本文标题：javascript - Stroke qualityanti-aliasing with svg - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745552137a2155679.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论