Menu
Given a simple SVG containing a line of some width from top left to bottom right.
<svg><line x1="0px" y1="0px" x2="100%" y2="100%"
style="stroke: #aaa; stroke-width: 6px"/></svg>
The line gets positioned amd stretched with CSS. Since it always spans the whole SVG, I can just set width and height of the SVG to do so. The problem is that edges of the line get cut in the corners.
Since I want to see the whole line including its corners. I thought about adding which is twice the stroke width to the SVG size. Then the line could start at 6px from left and top and go to 100% - 6px. How can I express this calculated coordinates in SVG? I would need something like the calc() in CSS3.
344
You can try adding id="lineId" to your html element, and then in js:
<html>
<body onload="resizeLine();">
<svg width="500px" height="150px"><line id="lineId" x1="6px" y1="6px" x2="100%" y2="100%"
style="stroke: #aaa; stroke-width: 6px"/></svg>
<script>
function resizeLine() {
alert('Note that line is not resized yet.');
var line = document.getElementById('lineId'),
lineWidth = line.getBoundingClientRect().width,
lineHeight = line.getBoundingClientRect().height;
line.setAttribute('x2', lineWidth-6);
line.setAttribute('y2', lineHeight-6);
}
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
