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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745552139a4632624.html
评论列表（0条）