SVG Line at this point isn't drawing line at this coordinates (x1="200" x2="0" y1="200" y2="200") . This problem happens only in Firefox. What mistake did I make?
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" x2="200" y1="0" y2="0" style="stroke:rgb(255,0,0);stroke-width:2"></line>
<line x1="200" x2="200" y1="0" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"></line>
<line x1="0" x2="0" y1="0" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"></line>
<line x1="200" x2="0" y1="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"></line>
</svg>
Related
This question already has answers here:
Why is SVG stroke-width : 1 making lines transparent?
(6 answers)
Closed 2 years ago.
Why are some of my lines in svg thicker than others?
All of them are on whole number coords. "stroke-width: 0.5" was my last attempt to create 1px line. I had tryed also elsewhere mentioned shape-rendering: crispedges with stroke of 1 pixel but with same setup those lines which appears thicker on image were straight 2px instead of 1. I would love to fix that somehow but even knowledge about how its determined which lines get thicker by what rule would be very appretiated. I dont understand why its so hard to make consistent 1px thick line using svg.
My code:
#my-svg {
width : 500px;
height: 500px;
margin: .5em;
}
#my-svg line {
stroke:black;
stroke-width:0.5;
}
<svg id="my-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<line x1="0" y1="26" x2="380" y2="26" ></line>
<line x1="0" y1="52" x2="380" y2="52" ></line>
<line x1="0" y1="78" x2="380" y2="78" ></line>
<line x1="0" y1="104" x2="380" y2="104"></line>
<line x1="0" y1="130" x2="380" y2="130"></line>
<line x1="0" y1="156" x2="380" y2="156"></line>
<line x1="0" y1="182" x2="380" y2="182"></line>
<line x1="40" y1="0" x2="40" y2="182"></line>
<line x1="240" y1="0" x2="240" y2="182"></line>
<line x1="300" y1="0" x2="300" y2="182"></line>
<line x1="380" y1="0" x2="380" y2="182"></line>
</svg>
Example when using stroke-width: 1 and shape-rendering: crispedges:
i used a html document and a seperated online editor to check your code twice. Your code is corect! It seems to be a browser visualisation error...
Quick tip: your code line can also end like this: stroke:black; stroke-width:0.5" />
If the error persists, please provide us with additional information such as browser, version, full code review, etc.
The Way it work for me:
<!DOCTYPE html>
<html>
<body>
<svg height="500" width="500" viewbox="0 0 500 500">
<line x1="0" y1="26" x2="380" y2="26" style="stroke:black; stroke-width:0.5" />
<line x1="0" y1="52" x2="380" y2="52" style="stroke:black; stroke-width:0.5" />
<line x1="0" y1="78" x2="380" y2="78" style="stroke:black; stroke-width:0.5" />
<line x1="0" y1="104" x2="380" y2="104" style="stroke:black; stroke-width:0.5" />
<line x1="0" y1="130" x2="380" y2="130" style="stroke:black; stroke-width:0.5" />
<line x1="0" y1="156" x2="380" y2="156" style="stroke:black; stroke-width:0.5" />
<line x1="0" y1="182" x2="380" y2="182" style="stroke:black; stroke-width:0.5" />
<line x1="40" y1="0" x2="40" y2="182" style="stroke:black; stroke-width:0.5" />
<line x1="240" y1="0" x2="240" y2="182" style="stroke:black; stroke-width:0.5" />
<line x1="300" y1="0" x2="300" y2="182" style="stroke:black; stroke-width:0.5" />
<line x1="380" y1="0" x2="380" y2="182" style="stroke:black; stroke-width:0.5" />
</svg>
</body>
</html>
This question already has answers here:
SVG gradient for perfectly horizontal path
(2 answers)
Closed 3 years ago.
I'm trying to add a gradient to the stroke of a line which fades out at the top but having no luck. Actually I kind of got it working like this, but it has browser issues even in Chrome certain SVG sizes where the gradient just breaks and is solid:
<linearGradient
id='whiteFadeGrad'
x1={svgHeight}
y1='0'
x2='0'
y2={svgHeight}
gradient-units='userSpaceOnUse'
>
<stop offset='0' stop-color='rgba(255,255,255,0)' />
<stop offset='1' stop-color='rgba(255,255,255,0.2)' />
</linearGradient>
I would much rather stick to using percentage units, but can't get it to work:
<p>The solid green one works, but you can't see the other when I apply the gradient to it. I've tried a lot of different x1/x2/y1/y2 values as well as gradientTransform(rotate(d)).</p>
<svg height="200" width="500">
<defs>
<linearGradient id='fadeGrad' x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset='0%' stop-color='red' />
<stop offset='100%' stop-color='blue' />
</linearGradient>
</defs>
<line x1="100" y1="0" x2="100" y2="200" style="stroke: green; stroke-width:4px; shape-rendering: crispEdges;" />
<line x1="120" y1="0" x2="120" y2="200" style="stroke: url('#fadeGrad'); stroke-width:4px; shape-rendering: crispEdges;" />
</svg>
Thanks
It looks like a bug and a hack, but worked:
<svg height="200" width="500">
<defs>
<linearGradient id='fadeGrad' x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset='0%' stop-color='red' />
<stop offset='100%' stop-color='blue' />
</linearGradient>
</defs>
<line x1="100" y1="0" x2="100" y2="200" style="stroke: green; stroke-width:4px; shape-rendering: crispEdges;" />
<line x1="120" y1="0" x2="120.001" y2="200" style="stroke: url('#fadeGrad'); stroke-width:4px; shape-rendering: crispEdges;" />
</svg>
You might probably use <rect> instead of <line>, which is not so hacky:
<svg height="200" width="500">
<defs>
<linearGradient id='fadeGrad' x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset='0%' stop-color='red' />
<stop offset='100%' stop-color='blue' />
</linearGradient>
</defs>
<line x1="100" y1="0" x2="100" y2="200" style="stroke: green; stroke-width:4px; shape-rendering: crispEdges;" />
<rect x="120" y="0" width="4" height="200" style="fill: url('#fadeGrad'); shape-rendering: crispEdges;" />
</svg>
Check this, I dont know much about SVG, but a simple googling does the job for me.
Could you please go through the code.
<p>The solid green one works, but you can't see the other when I apply the gradient to it. I've tried a lot of different x1/x2/y1/y2 values as well as gradientTransform(rotate(d)).</p>
<svg height="200" width="500">
<defs>
<linearGradient id="e" x1="40" y1="210" x2="400" y2="210" gradientUnits="userSpaceOnUse" gradientTransform="rotate(90)">
<stop stop-color="steelblue" offset="0" />
<stop stop-color="red" offset="1" />
</linearGradient>
</defs>
<line x1="100" y1="0" x2="100" y2="200" style="stroke: green; stroke-width:10px; shape-rendering: crispEdges;" />
<line x1="120" y1="0" x2="120" y2="200" style="stroke: url('#e'); stroke-width:4px; shape-rendering: crispEdges;" />
</svg>
FIDDLE
https://jsfiddle.net/vmt9z401/
HTML
<svg id="svg-timer" xmlns="http://www.w3.org/2000/svg">
<line class="timer-hours" x1="8.3333333333333%" y1="0" x2="8.3333333333333%" y2="325"></line>
<text x="8.3333333333333%" y="340" text-anchor="middle" fill="black">1H</text>
<line class="timer-hours" x1="16.666666666667%" y1="0" x2="16.666666666667%" y2="325"></line>
<text x="16.666666666667%" y="340" text-anchor="middle" fill="black">2H</text>
<line class="timer-hours" x1="25%" y1="0" x2="25%" y2="325"></line>
<text x="25%" y="340" text-anchor="middle" fill="black">3H</text>
<line class="timer-hours" x1="33.333333333333%" y1="0" x2="33.333333333333%" y2="325"></line>
<text x="33.333333333333%" y="340" text-anchor="middle" fill="black">4H</text>
<line class="timer-hours" x1="41.666666666667%" y1="0" x2="41.666666666667%" y2="325"></line>
<text x="41.666666666667%" y="340" text-anchor="middle" fill="black">5H</text>
<line class="timer-hours" x1="50%" y1="0" x2="50%" y2="325"></line>
<text x="50%" y="340" text-anchor="middle" fill="black">6H</text>
<line class="timer-hours" x1="58.333333333333%" y1="0" x2="58.333333333333%" y2="325"></line>
<text x="58.333333333333%" y="340" text-anchor="middle" fill="black">7H</text>
<line class="timer-hours" x1="66.666666666667%" y1="0" x2="66.666666666667%" y2="325"></line>
<text x="66.666666666667%" y="340" text-anchor="middle" fill="black">8H</text>
<line class="timer-hours" x1="75%" y1="0" x2="75%" y2="325"></line>
<text x="75%" y="340" text-anchor="middle" fill="black">9H</text>
<line class="timer-hours" x1="83.333333333333%" y1="0" x2="83.333333333333%" y2="325"></line>
<text x="83.333333333333%" y="340" text-anchor="middle" fill="black">10H</text>
<line class="timer-hours" x1="91.666666666667%" y1="0" x2="91.666666666667%" y2="325"></line>
<text x="91.666666666667%" y="340" text-anchor="middle" fill="black">11H</text>
<line class="timer-quarters" x1="2.0833333333333%" y1="0" x2="2.0833333333333%" y2="350"></line>
<line class="timer-quarters" x1="4.1666666666667%" y1="0" x2="4.1666666666667%" y2="350"></line>
<line class="timer-quarters" x1="6.25%" y1="0" x2="6.25%" y2="350"></line>
<line class="timer-quarters" x1="10.416666666667%" y1="0" x2="10.416666666667%" y2="350"></line>
<line class="timer-quarters" x1="12.5%" y1="0" x2="12.5%" y2="350"></line>
<line class="timer-quarters" x1="14.583333333333%" y1="0" x2="14.583333333333%" y2="350"></line>
<line class="timer-quarters" x1="18.75%" y1="0" x2="18.75%" y2="350"></line>
<line class="timer-quarters" x1="20.833333333333%" y1="0" x2="20.833333333333%" y2="350"></line>
<line class="timer-quarters" x1="22.916666666667%" y1="0" x2="22.916666666667%" y2="350"></line>
<line class="timer-quarters" x1="27.083333333333%" y1="0" x2="27.083333333333%" y2="350"></line>
<line class="timer-quarters" x1="29.166666666667%" y1="0" x2="29.166666666667%" y2="350"></line>
<line class="timer-quarters" x1="31.25%" y1="0" x2="31.25%" y2="350"></line>
<line class="timer-quarters" x1="35.416666666667%" y1="0" x2="35.416666666667%" y2="350"></line>
<line class="timer-quarters" x1="37.5%" y1="0" x2="37.5%" y2="350"></line>
<line class="timer-quarters" x1="39.583333333333%" y1="0" x2="39.583333333333%" y2="350"></line>
<line class="timer-quarters" x1="43.75%" y1="0" x2="43.75%" y2="350"></line>
<line class="timer-quarters" x1="45.833333333333%" y1="0" x2="45.833333333333%" y2="350"></line>
<line class="timer-quarters" x1="47.916666666667%" y1="0" x2="47.916666666667%" y2="350"></line>
<line class="timer-quarters" x1="52.083333333333%" y1="0" x2="52.083333333333%" y2="350"></line>
<line class="timer-quarters" x1="54.166666666667%" y1="0" x2="54.166666666667%" y2="350"></line>
<line class="timer-quarters" x1="56.25%" y1="0" x2="56.25%" y2="350"></line>
<line class="timer-quarters" x1="60.416666666667%" y1="0" x2="60.416666666667%" y2="350"></line>
<line class="timer-quarters" x1="62.5%" y1="0" x2="62.5%" y2="350"></line>
<line class="timer-quarters" x1="64.583333333333%" y1="0" x2="64.583333333333%" y2="350"></line>
<line class="timer-quarters" x1="68.75%" y1="0" x2="68.75%" y2="350"></line>
<line class="timer-quarters" x1="70.833333333333%" y1="0" x2="70.833333333333%" y2="350"></line>
<line class="timer-quarters" x1="72.916666666667%" y1="0" x2="72.916666666667%" y2="350"></line>
<line class="timer-quarters" x1="77.083333333333%" y1="0" x2="77.083333333333%" y2="350"></line>
<line class="timer-quarters" x1="79.166666666667%" y1="0" x2="79.166666666667%" y2="350"></line>
<line class="timer-quarters" x1="81.25%" y1="0" x2="81.25%" y2="350"></line>
<line class="timer-quarters" x1="85.416666666667%" y1="0" x2="85.416666666667%" y2="350"></line>
<line class="timer-quarters" x1="87.5%" y1="0" x2="87.5%" y2="350"></line>
<line class="timer-quarters" x1="89.583333333333%" y1="0" x2="89.583333333333%" y2="350"></line>
<line class="timer-quarters" x1="93.75%" y1="0" x2="93.75%" y2="350"></line>
<line class="timer-quarters" x1="95.833333333333%" y1="0" x2="95.833333333333%" y2="350"></line>
<line class="timer-quarters" x1="97.916666666667%" y1="0" x2="97.916666666667%" y2="350"></line>
</svg>
CSS
#svg-timer {
width: 100%;
display: block;
height: 350px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
font-family: Arial;
}
.timer-hours {
stroke: rgb(0, 0, 0);
stroke-width: 1;
}
.timer-quarters {
stroke: rgb(0, 0, 0);
stroke-width: 0.03em;
}
Description
I want to draw 11 lines, one for each hour - which are all the same (timer-hours class). They got a text beneath them. Everything works fine to this point.
Question
The lines have different thicknesses - why do they have not the same "thickness" ?
I got two different screens and i get the problem on both.
I also tried with
stroke-width: 0.1em;
but there is no change.
Do i need another unit (px)?
On the Screenshot, it also looks different?!
Screenshot
Add shape-rendering: crispEdges;
#svg-timer {
width: 100%;
display: block;
height: 350px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
font-family: Arial;
shape-rendering: crispEdges;
}
.timer-hours {
stroke: rgb(0, 0, 0);
stroke-width: 1;
}
.timer-quarters {
stroke: rgb(0, 0, 0);
stroke-width: 0.03em;
}
<svg id="svg-timer" xmlns="http://www.w3.org/2000/svg">
<line class="timer-hours" x1="8.3333333333333%" y1="0" x2="8.3333333333333%" y2="325"></line>
<text x="8.3333333333333%" y="340" text-anchor="middle" fill="black">1H</text>
<line class="timer-hours" x1="16.666666666667%" y1="0" x2="16.666666666667%" y2="325"></line>
<text x="16.666666666667%" y="340" text-anchor="middle" fill="black">2H</text>
<line class="timer-hours" x1="25%" y1="0" x2="25%" y2="325"></line>
<text x="25%" y="340" text-anchor="middle" fill="black">3H</text>
<line class="timer-hours" x1="33.333333333333%" y1="0" x2="33.333333333333%" y2="325"></line>
<text x="33.333333333333%" y="340" text-anchor="middle" fill="black">4H</text>
<line class="timer-hours" x1="41.666666666667%" y1="0" x2="41.666666666667%" y2="325"></line>
<text x="41.666666666667%" y="340" text-anchor="middle" fill="black">5H</text>
<line class="timer-hours" x1="50%" y1="0" x2="50%" y2="325"></line>
<text x="50%" y="340" text-anchor="middle" fill="black">6H</text>
<line class="timer-hours" x1="58.333333333333%" y1="0" x2="58.333333333333%" y2="325"></line>
<text x="58.333333333333%" y="340" text-anchor="middle" fill="black">7H</text>
<line class="timer-hours" x1="66.666666666667%" y1="0" x2="66.666666666667%" y2="325"></line>
<text x="66.666666666667%" y="340" text-anchor="middle" fill="black">8H</text>
<line class="timer-hours" x1="75%" y1="0" x2="75%" y2="325"></line>
<text x="75%" y="340" text-anchor="middle" fill="black">9H</text>
<line class="timer-hours" x1="83.333333333333%" y1="0" x2="83.333333333333%" y2="325"></line>
<text x="83.333333333333%" y="340" text-anchor="middle" fill="black">10H</text>
<line class="timer-hours" x1="91.666666666667%" y1="0" x2="91.666666666667%" y2="325"></line>
<text x="91.666666666667%" y="340" text-anchor="middle" fill="black">11H</text>
<line class="timer-quarters" x1="2.0833333333333%" y1="0" x2="2.0833333333333%" y2="350"></line>
<line class="timer-quarters" x1="4.1666666666667%" y1="0" x2="4.1666666666667%" y2="350"></line>
<line class="timer-quarters" x1="6.25%" y1="0" x2="6.25%" y2="350"></line>
<line class="timer-quarters" x1="10.416666666667%" y1="0" x2="10.416666666667%" y2="350"></line>
<line class="timer-quarters" x1="12.5%" y1="0" x2="12.5%" y2="350"></line>
<line class="timer-quarters" x1="14.583333333333%" y1="0" x2="14.583333333333%" y2="350"></line>
<line class="timer-quarters" x1="18.75%" y1="0" x2="18.75%" y2="350"></line>
<line class="timer-quarters" x1="20.833333333333%" y1="0" x2="20.833333333333%" y2="350"></line>
<line class="timer-quarters" x1="22.916666666667%" y1="0" x2="22.916666666667%" y2="350"></line>
<line class="timer-quarters" x1="27.083333333333%" y1="0" x2="27.083333333333%" y2="350"></line>
<line class="timer-quarters" x1="29.166666666667%" y1="0" x2="29.166666666667%" y2="350"></line>
<line class="timer-quarters" x1="31.25%" y1="0" x2="31.25%" y2="350"></line>
<line class="timer-quarters" x1="35.416666666667%" y1="0" x2="35.416666666667%" y2="350"></line>
<line class="timer-quarters" x1="37.5%" y1="0" x2="37.5%" y2="350"></line>
<line class="timer-quarters" x1="39.583333333333%" y1="0" x2="39.583333333333%" y2="350"></line>
<line class="timer-quarters" x1="43.75%" y1="0" x2="43.75%" y2="350"></line>
<line class="timer-quarters" x1="45.833333333333%" y1="0" x2="45.833333333333%" y2="350"></line>
<line class="timer-quarters" x1="47.916666666667%" y1="0" x2="47.916666666667%" y2="350"></line>
<line class="timer-quarters" x1="52.083333333333%" y1="0" x2="52.083333333333%" y2="350"></line>
<line class="timer-quarters" x1="54.166666666667%" y1="0" x2="54.166666666667%" y2="350"></line>
<line class="timer-quarters" x1="56.25%" y1="0" x2="56.25%" y2="350"></line>
<line class="timer-quarters" x1="60.416666666667%" y1="0" x2="60.416666666667%" y2="350"></line>
<line class="timer-quarters" x1="62.5%" y1="0" x2="62.5%" y2="350"></line>
<line class="timer-quarters" x1="64.583333333333%" y1="0" x2="64.583333333333%" y2="350"></line>
<line class="timer-quarters" x1="68.75%" y1="0" x2="68.75%" y2="350"></line>
<line class="timer-quarters" x1="70.833333333333%" y1="0" x2="70.833333333333%" y2="350"></line>
<line class="timer-quarters" x1="72.916666666667%" y1="0" x2="72.916666666667%" y2="350"></line>
<line class="timer-quarters" x1="77.083333333333%" y1="0" x2="77.083333333333%" y2="350"></line>
<line class="timer-quarters" x1="79.166666666667%" y1="0" x2="79.166666666667%" y2="350"></line>
<line class="timer-quarters" x1="81.25%" y1="0" x2="81.25%" y2="350"></line>
<line class="timer-quarters" x1="85.416666666667%" y1="0" x2="85.416666666667%" y2="350"></line>
<line class="timer-quarters" x1="87.5%" y1="0" x2="87.5%" y2="350"></line>
<line class="timer-quarters" x1="89.583333333333%" y1="0" x2="89.583333333333%" y2="350"></line>
<line class="timer-quarters" x1="93.75%" y1="0" x2="93.75%" y2="350"></line>
<line class="timer-quarters" x1="95.833333333333%" y1="0" x2="95.833333333333%" y2="350"></line>
<line class="timer-quarters" x1="97.916666666667%" y1="0" x2="97.916666666667%" y2="350"></line>
</svg>
The lines have different thicknesses - why do they have not the same "thickness" ?
The answer is "because of anti-aliasing". Antialiasing is the use of semi-transparent pixels along the edges of a shape. The purpose is to smooth out the look of the edges to simulate the fact that the edge of the shape is covering only a portion of the edge pixels. So, for example, a black shape that covers only half of a pixel will be drawn as a black pixel that is 50% transparent. Resulting in a 50% grey pixel, assuming it is on a white background.
Your lines have erratic widths because of anti-aliasing, and is exacerbated by the fact that your lines are positioned at inconsistent places relative to pixel boundaries.
Anti-aliasing is great, but it has limits. Using shape-rendering="crispEdges" can help.
But a possibly better solution is to choose a graph size so that your graph lines align to pixel boundaries. You either have to choose whole pixel coordinates, or half (0.5) coordinate values depending on whether your stroke-width is even or odd.
See this answer for more information:
https://stackoverflow.com/a/23376793/1292848
I wanted to create a graphics where there will be a rectangle node in the center and from each of it's corner edges, draw a cross line. That means 4 lines in 4 corner edge of the rectangle.
I could only show some lines in the top left edge of the rectangle. Can anyone guide me on how to show other three lines from that rectangle, please? I did not understand the line concept from the docs
Here is the demo
<svg width="800" height="600" viewbox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 250 100)">
<rect width="200" height="60" rx="5" ry="5">
</rect>
<text x="100" y="30" font-size="14" text-anchor="middle" fill="white">
Root Node
</text>
<line x1="0" y1="0" x2="0" y2="90" stroke="black" stroke-width="3" transform="rotate(-220)"/>
<line x1="0" y1="0" x2="10" y2="90" stroke="black" stroke-width="3" transform="rotate(-220)"/>
<line x1="0" y1="0" x2="10" y2="90" stroke="black" stroke-width="3" transform="rotate(-220)"/>
<line x1="0" y1="0" x2="10" y2="90" stroke="black" stroke-width="3" transform="rotate(-220)"/>
</g>
</svg>
http://jsbin.com/jucosalice/edit?html,output
To draw cross lines at each corner without calculating coordinates, you can use rotate and translate properties:
<svg width="800" height="600" viewbox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 250 100)">
<rect width="200" height="60" rx="5" ry="5">
</rect>
<text x="100" y="30" font-size="14" text-anchor="middle" fill="white">
Root Node
</text>
<line x1="0" y1="0" x2="100" y2="0" transform="rotate(-135)" stroke="black" stroke-width="3"/>
<line x1="0" y1="0" x2="100" y2="0" transform="translate(200 0) rotate(-45)" stroke="black" stroke-width="3"/>
<line x1="0" y1="0" x2="100" y2="0" transform="translate(0 60) rotate(135)" stroke="black" stroke-width="3"/>
<line x1="0" y1="0" x2="100" y2="0" transform="translate(200 60) rotate(45)" stroke="black" stroke-width="3"/>
</g>
</svg>
Explanation:
The X axis is from left to right, the Y axis is from top to bottom. The direction of rotation is clockwise. So, the code
<line x1="0" y1="0" x2="100" y2="0" transform="translate(200 0) rotate(-45)" stroke="black" stroke-width="3"/>
draws a line from (0,0) to (100,0), translate(shift) it by 200 unit in X direction towards right (as it is width of main rectangle), and then rotate it by -45 deg to get its slope.
See here for their documentation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<svg width="800" height="600" viewbox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 250 100)">
<rect width="200" height="60" rx="5" ry="5"></rect>
<text x="100" y="30" font-size="14" text-anchor="middle" fill="white">
Root Node
</text>
<line x1="0" y1="0" x2="-75" y2="-75" stroke="black" stroke-width="3"/>
<line x1="200" y1="60" x2="275" y2="135" stroke="black" stroke-width="3"/>
<line x1="200" y1="0" x2="275" y2="-75" stroke="black" stroke-width="3"/>
<line x1="0" y1="60" x2="-75" y2="135" stroke="black" stroke-width="3"/>
</g>
</svg>
</body>
</html>
As the title said, I want to add an SVG border animation to a div. I tryed with a static div but now I want to make it works even if the div width and height change dynamically (as thumbnail class with Bootstrap)
Here is my SVG :
<svg>
<line class="top" x1="0" y1="0" x2="3000" y2="0"/>
<line class="left" x1="0" y1="3000" x2="0" y2="0"/>
<line class="bottom" x1="3000" y1="300" x2="0" y2="300"/>
<line class="right" x1="300" y1="0" x2="300" y2="300"/>
</svg>
Thanks for the help, here is a jsbin : http://jsbin.com/suvinakaqa/1/edit
If you want the SVG to responsively fill the <div>, you need to give it a viewBox and set preserveAspectRatio="none" so that it stretches to fill the <div> both horizontally and vertically. Otherwise it will just keep its aspect ratio and just scale up or down to fit inside the <div>.
Note that the stretching that occurs, now that you've disabled aspect ratio, will cause the horizontal lines to appear to have a different width to the vertical ones. To fix that you could add vector-effect="non-scaling-stroke" to the lines.
.myDiv
{
width: 100%;
height: 300px;
}
<div class="myDiv">
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none"
stroke="black" stroke-width="4">
<line class="top" x1="0" y1="0" x2="100" y2="0" vector-effect="non-scaling-stroke"/>
<line class="left" x1="0" y1="100" x2="0" y2="0" vector-effect="non-scaling-stroke"/>
<line class="bottom" x1="100" y1="100" x2="0" y2="100" vector-effect="non-scaling-stroke"/>
<line class="right" x1="100" y1="0" x2="100" y2="100" vector-effect="non-scaling-stroke"/>
</svg>
</div>
For eg you have following in HTML
<div class="myClass">
<svg>
<line class="top" x1="0" y1="0" x2="3000" y2="0"/>
<line class="left" x1="0" y1="3000" x2="0" y2="0"/>
<line class="bottom" x1="3000" y1="300" x2="0" y2="300"/>
<line class="right" x1="300" y1="0" x2="300" y2="300"/>
</svg>
</div>
Please use following CSS
.myClass svg{
width:100% !important;
height:auto;
}