Question

在这个小提琴中 - 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>

Answer 1

此代码可以帮助您

＆＃13;

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");

＆＃13;

svg {
  background: green;
}

＆＃13;

<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>

＆＃13;

我修改了你的小提琴here

使SVG在其中具有<text>元素的相等宽度

1 个答案: