Reputation: 2573
I am trying to display different SVG elements (line, ellipse, rectangle) in an HTML but facing this strange issue of elements getting cut and sometimes displaying in a blurred way (small cuts like saw blade). I tried giving different sizes of div and elements, positioning them differently but nothing seems to be working, check the following sample code:
<div style="position:absolute; top:17pt; left:37pt; ">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line id = "default" x1="0" y1="0" x2="16" y2="272" style="stroke:rgb(0,0,0); stroke-width:7;"/>
</svg>
</div>
<div style="position:absolute; top:200pt; left:67pt; ">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="83" cy="77" rx="83" ry="77" style="fill:none; stroke-width:3;stroke: rgb(0,0,0);stroke-dasharray:15, 4, 4, 4, 4, 4"/>
</svg>
</div>
You can find the Fiddle here.. Am i doing something wrong or is it some internal svg issue. In case, you are not getting the problem in your browser, i am also attaching an image. (i am using Chrome)
Upvotes: 1
Views: 12424
Reputation: 74106
Your SVGs have no assigned viewBox
. With the browser recognition of the size of an SVG sometimes making mistakes, just parts of the SVG get shown. The viewBox
actually tells the browser which area of the infinite SVG plane it should actually show.
Furthermore, you have to give the div
tags a width
and height
to be able to see the SVGs:
<div style="position:absolute; top:17pt; left:37pt; width:100px; height: 300px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-10 -10 100 300">
<line id="default" x1="0" y1="0" x2="16" y2="272" style="stroke:rgb(0,0,0); stroke-width:7;" />
</svg>
</div>
<div style="position:absolute; top:200pt; left:67pt; width:200px; height: 200px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-10 -10 210 210">
<ellipse cx="83" cy="77" rx="83" ry="77" style="fill:none; stroke-width:3;stroke: rgb(0,0,0);stroke-dasharray:15, 4, 4, 4, 4, 4" />
</svg>
</div>
Wrt to the "weird output" in this fiddle from the comments:
Suppose you are the browser. You should draw a line from 0,0 to 0,50 (for simplicities sake let us use a vertical line. the results are the same for your line modulo the rotation). So you go to 0,0 and start drawing, but the user also specified stroke-width: 7
, so the actual line will be between -3.5,0 and 3.5,0 to result in a line of width 7.
In the next step you apply the viewBox
that has been set, so you throw away anything outside of the rectangle 0,0 to 100,100. In particular this gets rid of half line you just draw as this half is not within the given viewBox
.
To the user in the browser it seems that you have drawn a line of width 3.5 instead of 7, but you just did exactly what the user asked you to do ...
Upvotes: 5