时间戳

首页 > 解决方案 > 使 SVG 等宽里面的元素

html - 使 SVG 等宽里面的元素

问题描述

在这个小提琴中 - https://jsfiddle.net/xtxd6r8t/ - 我有一个元素在标签<svg>中包含一些文本。<text>当我检查<svg>并向下钻取<text>元素时，我可以看到它的宽度等于副本的总长度。但是，该<svg>元素更高更宽。有没有办法让<svg>元素从子元素中取出它的宽度和高度<text>？

<svg xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="20" stroke="none" fill="red">
    SVG Colored Text
  </text>
</svg>

标签： htmlcsssvg

解决方案

此代码将帮助您

var svg = document.getElementsByTagName("svg")[0];
var bbox = svg.getBBox();
var viewBox = [bbox.x, bbox.y, bbox.width, bbox.height].join(" ");
svg.setAttribute("viewBox", viewBox);
svg.setAttribute("width", bbox.x + bbox.width  + "px");
svg.setAttribute("height",bbox.y + bbox.height + "px");
svg {
  background: green;
}
<svg xmlns="http://www.w3.org/2000/svg" class="image">
  <text x="10" y="20" stroke="none" fill="red">
    SVG Colored Text SVG Colored Text
  </text>
</svg>

我在这里修改了你的小提琴

推荐阅读