如何在 SVG 坐标中计算？
dan*_*jar 5 html css svg line coordinates
给定一个简单的 SVG，其中包含一条从左上角到右下角的宽度。
<svg><line x1="0px" y1="0px" x2="100%" y2="100%"
style="stroke: #aaa; stroke-width: 6px"/></svg>
该行被定位并用 CSS 拉伸。因为它总是跨越整个 SVG，我可以只设置 SVG 的宽度和高度来做到这一点。问题是线的边缘在角落处被切割。
因为我想看到整条线，包括它的角落。我想过将两倍于 SVG 大小的笔画宽度添加进来。然后该线可以从左侧和顶部的 6px 开始并转到 100% - 6px。如何在 SVG 中表达这个计算出的坐标？我需要类似calc()CSS3 中的东西。
您可以尝试将 id="lineId" 添加到您的 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>
| 归档时间： |
|
| 查看次数： |
3703 次 |
| 最近记录： |