Question

给出一个简单的SVG，其中包含从左上角到右下角的宽度线。

<svg><line x1="0px" y1="0px" x2="100%" y2="100%"
style="stroke: #aaa; stroke-width: 6px"/></svg>

该行被定位并使用CSS进行拉伸。因为它总是跨越整个SVG，所以我可以设置SVG的宽度和高度。问题是线的边缘会在角落处被切割。

SVG line with cut off edges

因为我想看到整条线包括它的角落。我想添加两倍于SVG尺寸的笔画宽度。然后该线可以从左侧和顶部开始6px并且转到100％ - 6px。如何在SVG中表达此计算坐标？我需要类似CSS3中的calc()。

Answer 1

您可以尝试添加id =＆＃34; lineId＆＃34;到你的html元素，然后在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>

如何计算SVG坐标？

1 个答案: