请考虑以下代码。我能够使两个内联svg符合各自的文本内容吗？即“Teststring.Lorem。”应该更长，“foo”更短。我需要两个相同的svg，内容文本是唯一的区别。目前它们的静态宽度为50px。
我知道我可以通过HTML + CSS轻松实现这一点，但在我的真实世界场景中，我需要在文本后面使用SMIL动画，这是最简单的方法。我已经有了（更复杂的）替代品，所以这不是我想要的。我只是想知道这是否可行，如果可能的话。所以“它根本无法工作，尝试不同的东西”将是一个有效的答案。 （虽然不是我希望的东西。）
<svg width="50" height="20" viewBox="0 0 50 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<foreignObject x="0" y="0" width="50" height="20">
<body xmlns="http://www.w3.org/1999/xhtml">
Teststring. Lorem.
</body>
</foreignObject>
<rect x="0" y="0" width="50" height="20" fill="rgba(0,0,0,.3)"></rect>
</svg><br>
<svg width="50" height="20" viewBox="0 0 50 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<foreignObject x="0" y="0" width="50" height="20">
<body xmlns="http://www.w3.org/1999/xhtml">
foo
</body>
</foreignObject>
<rect x="0" y="0" width="50" height="20" fill="rgba(0,0,0,.3)"></rect>
</svg>
答案 0 :(得分：0)
我不确定以下是否是正确的方法，但它确实有效。
svg中的文本包含在span标记中。在onload事件中，svg标记的宽度设置为通过javascript测量的span元素的宽度。不幸的是，你必须为svg标签设置一个单独的id，并相应地调整javascript代码第一行中的id字符串。
您还需要将新宽度设置为svg中的所有相关元素。如果你有很多元素，这可能会变得有点难看。 可能的快捷方式可以是操纵变换属性的组元素。这会将组的内容缩放到正确的大小，同时保留属性。如下所示：
//javascript
thisSvg.getElementsByClassName('group')[0].setAttribute(
'transform', 'scale('+textWidth/50+')');
<!--svg-->
<g class="group">
<rect x="0" y="0" width="50" height="20" fill="rgba(0,0,0,.3)"></rect>
<rect x="0" y="0" width="25" height="20" fill="rgba(1,0,0,.3)"></rect>
</g>
<svg id="custom-id-1" width="50" height="20" viewBox="0 0 50 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="
var thisSvg = document.getElementById('custom-id-1');
var box = thisSvg.getElementsByClassName('text')[0].getBoundingClientRect();
var textWidth = box.right-box.left;
thisSvg.setAttribute('viewBox', '0 0 '+textWidth+' 20');
thisSvg.setAttribute('width', textWidth);
thisSvg.getElementsByClassName('foreign')[0].setAttribute('width', textWidth);
thisSvg.getElementsByClassName('rect')[0].setAttribute('width', textWidth);
">
<foreignObject class="foreign" x="0" y="0" width="50" height="20">
<body xmlns="http://www.w3.org/1999/xhtml">
<span class="text" style="white-space:nowrap">Teststring. Lorem.</span>
</body>
</foreignObject>
<rect class="rect" x="0" y="0" width="50" height="20" fill="rgba(0,0,0,.3)"></rect>
</svg><br>
<svg id="custom-id-2" width="50" height="20" viewBox="0 0 50 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="
var thisSvg = document.getElementById('custom-id-2');
var box = thisSvg.getElementsByClassName('text')[0].getBoundingClientRect();
var textWidth = box.right-box.left;
thisSvg.setAttribute('viewBox', '0 0 '+textWidth+' 20');
thisSvg.setAttribute('width', textWidth);
thisSvg.getElementsByClassName('foreign')[0].setAttribute('width', textWidth);
thisSvg.getElementsByClassName('rect')[0].setAttribute('width', textWidth);
">
<foreignObject class="foreign" x="0" y="0" width="50" height="20">
<body xmlns="http://www.w3.org/1999/xhtml">
<span class="text" style="white-space:nowrap">foo</span>
</body>
</foreignObject>
<rect class="rect" x="0" y="0" width="50" height="20" fill="rgba(0,0,0,.3)"></rect>
</svg>