如何在SVG文档中<use>一个命名的<tspan>元素？
提问于 2021-12-09 11:56:36
我试图在SVG文档的早期定义一个tspan，以便它可以在稍后的text中被屏蔽。至少在Firefox中，下面的代码不会产生这个结果。
<svg version="1.1" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<defs>
<tspan id="transcluded-text">This is a text</tspan>
</defs>
<text>
<use href="#transcluded-text"/>
</text>
</svg>使用Firefox的检查工具，use元素如预期的那样包含一个影子DOM (#shadow-root)，但是影子DOM本身是空的。
不使用Javascript，是否有可能像这样将tspan转换到text中？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-12-10 01:27:10
text元素只能包含文本内容子元素(所以，不能包含<use>)，而defs元素可以包含的唯一文本相关元素是<text>。因此，这一切都表明<tspan>不能以这种方式使用。
<svg version="1.1" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<defs>
<text x="10" y="20" font-size="20" id="transcluded-text">This is a text</text>
</defs>
<use href="#transcluded-text"/>
</svg>
Stack Overflow用户
发布于 2021-12-10 02:29:53
由于不能在<use>中使用元素，所以在中使用<text>元素；
或者是<defs>中的裸露的<defs>
现代的本机Web组件可以完成替换工作：
(这将导致您可能需要处理的FOUC )
<script>
customElements.define("svg-use-replacer", class extends HTMLElement {
connectedCallback() {
setTimeout(() => { // make sure SVG is parsed
this.querySelectorAll('use').forEach(use => {
let href = use.getAttribute("href");
let tspan = this.querySelector(href);
use.replaceWith(tspan); // .replaceWith was not available in IE
});
// if the bare <svg> is required in the DOM:
// this.replaceWith(this.querySelector("svg"));
});
}
});
</script>
<svg-use-replacer>
<svg version="1.1" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<defs>
<tspan id="foo" stroke="green">Wonderful</tspan>
</defs>
<text x="10" y="20" font-size="20">
Hello
<use href="#foo" /> Web Component
</text>
</svg>
</svg-use-replacer>
备注
- oldskool的方法是在解析该元素之后附加一个类和，在它上运行JavaScript。
- 对于Web组件，当定义Web组件时，它完全不需要()。
您可以在任何时候执行上述
script。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70295962
复制相关文章
点击加载更多
腾讯云开发者
