拉伸svg路径以适应内容

时间:2018-06-15 15:20:46

标签: javascript svg

我有一堆奇怪的viewbox svg图标,我想将它们标准化为相同的大小。我想拉伸它适合坚持比例的盒子。 (icomoon.io有一个工具)。 我可以规范化viewBox并将路径转换为正确的坐标,但是仍然无法弄清楚如何获得我应该缩放的比例。

例如,此图标有一个填充

enter image description here

我知道比率是=(BoxX - BoxY)/(boundryX - boundryY) 我看到了一些建议getBBox()的答案,但它说的不是函数。

我如何解析:

const parser = new DOMParser();
 const svg = parser.parseFromString(item.contents, 'image/svg+xml');
      if(!svg.getElementsByTagName('svg')[0]) return
      const viewBox = svg.getElementsByTagName('svg')[0].getAttribute('viewBox');
      const path = svg.getElementsByTagName('path')[0].getAttribute('d');

svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>arrow</title>
<path d="M3.597 10.945q0-0.316 0.246-0.528 0.164-0.163 0.458-0.163 0.363 0 0.528 0.234l6.48 7.347v-13.534q0-0.292 0.205-0.498t0.486-0.206q0.293 0 0.498 0.206t0.206 0.498v13.534l6.48-7.347q0.212-0.234 0.528-0.234 0.293 0 0.458 0.163 0.234 0.212 0.234 0.528 0 0.293-0.163 0.457l-7.782 8.837-0.046 0.024q-0.047 0.047-0.071 0.047l-0.141 0.070h-0.058q-0.047 0.024-0.141 0.024t-0.164-0.024l-0.117-0.046h-0.012t-0.012-0.024q-0.046 0-0.105-0.047l-0.046-0.024q0-0.047-0.046-0.047 0-0.024-0.012-0.024h-0.012l-7.699-8.766q-0.163-0.164-0.175-0.457z"></path>
</svg>

0 个答案:

没有答案