SVG折线使响应更快

时间:2017-11-22 10:42:11

标签: javascript html css svg

所以我有以下示例 - 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.com/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>
&#13;
&#13;
&#13;

Desired Result

因此上面的图像将是理想的结果。图像大小的比例会发生变化,以匹配块的全宽。

1 个答案:

答案 0 :(得分:0)

找到解决方案。万一其他人将来会搜索 -

你可以将viewBox参数添加到svg标签,在这种情况下我们对最后两位数感兴趣,所以viewBox="0 0 250 200"做得很好。 250是最大x坐标,200是最大坐标。