CODEWITHSUNDEEP
htmlcsssvg
Abdul Jabbar
Abdul Jabbar

Reputation: 2573

HTML SVG Elements not rendering properly:

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)

enter image description here

Upvotes: 1

Views: 12424

Answers (1)

Sirko
Sirko

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>

Corrected Fiddle

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

Related Questions