所以我有以下示例 - https://jsfiddle.net/po2kddf4/ .我想让它全宽。因此,期望的结果应该是 svg 折线覆盖 100% 高度和 100% 宽度。
HTML:
.block {
width: 100%;
height: 400px;
border: 1px solid black;
}
<div class="block">
<svg id="SvgjsSvg1071" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs">
<defs id="SvgjsDefs1072"></defs>
<polyline id="SvgjsPolyline1073" points="10,10 100,10 100,200 10,200 10,10" fill="#ffa500" stroke="#000000" stroke-width="4" style="cursor: pointer;"><title>Test 1</title></polyline>
<polyline id="SvgjsPolyline1074" points="100,10 200,10 200,50 250,50 250,150 100,150 100,10" fill="#ffa500" stroke="#000000" stroke-width="4" style="cursor: pointer; opacity: 1;"><title>Test 2</title></polyline>
</svg>
</div>
所以上面的图像将是期望的结果。图像大小的比例发生变化,以匹配 block 的全宽。
最佳答案
找到解决方案。以防将来有人搜索 -
您可以将 viewBox 参数添加到 svg 标签,在这种情况下,我们对最后两位数字感兴趣,所以 viewBox="0 0 250 200"
就成功了。 250是最大x坐标,200是最大y坐标。
关于javascript - SVG折线使响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47432614/