你如何使SVG'使用'标签的内容动态？

-1

我想修改一个已经用<实例化的svg图形的内容，使用>标签。例如，我将如何改变一些嵌入式文本与JS？动画呢？你如何使SVG'使用'标签的内容动态？

在下面的代码中，第一个svg是内联的，脚本能够将svg文本从'text1'更改为'new1'。

通过<使用>标签创建第二个和第三个svg。它们现在存在于影子DOM中，并且不能被querySelector（）访问。它返回null。

我知道它的设计，阴影DOM元素很难达到通过CSS和JS。但是，您可以使用通过<使用>标记的css变量来设置阴影dom元素的样式。那么是否有类似的机制可以让svg作者'发布'，它允许受控的JS操作，即修改文本元素？

<style> 
 
    .objShape2 { 
 
    width: 50px; 
 
    height: 50px; 
 
    } 
 
    
 
    .objShape3 { 
 
    width: 100px; 
 
    height: 100px; 
 
    } 
 
</style> 
 

 
<body> 
 

 
    <svg id='obj1' style="width:100px; height:100px;" viewBox="0 0 100 100"> 
 
\t \t <rect id="rect1" width="100" height="100" \t style="fill: blue; " /> 
 
\t \t <text id= "text1" x="35px" y="40px">text1</text> 
 
\t </svg> 
 

 
    <script> 
 
    var el = document.querySelector("svg#obj1 text"); 
 
    console.log(el.textContent); 
 
    el.textContent = "new1" 
 
    console.log(el.textContent); 
 
    </script> 
 

 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="visibility:hidden; width:0; height:0;"> 
 
\t \t <symbol id='my-object' viewBox="0 0 100 100"> 
 
\t \t \t <rect id="my-rect" width="100" height="100" \t style="fill: red;" /> 
 
\t \t \t <text id= "my-text" x="35px" y="40px">text</text> 
 
\t \t </symbol> 
 
\t </svg> 
 

 
    <svg id="obj2" class="objShape2"> <use xlink:href="#my-object"/> </svg> 
 
    <svg id="obj3" class="objShape3"> <use xlink:href="#my-object"/> </svg> 
 

 
    <script> 
 
    var el = document.querySelector("svg#obj2 text"); 
 
    console.log(el.textContent); 
 
    el.textContent = "new2" 
 
    console.log(el.textContent); 
 
    </script> 
 
</body>

来源

2017-04-04 Philip Houghton

动画或修改目标 – Kaiido

我认为你需要详细说明。这并不完全清楚你在问什么。 –

如果你有一个»主SVG«和，使用<use>标签某些情况下，你基本上有一个来源，并链接到源头。因此访问<use>的“内容”（可能通过使用其instanceRoot属性）将生成源图形。如果你改变它，你会改变它出现的所有地方。

换句话说：原始文件（<svg>）及其»克隆«（<use>）最终保持一致（===）图形。所以，如果你想»本地«修改一个<use>的内容，这样，无论是源，也没有其他»克隆«的影响，你必须转换<use>到：

<g <!-- all transformations of the use go here --> > 
    <!-- all the content of the source goes here --> 
</g>

更多细节有看这里：w3c它包括一个关于如何应用CSS样式的描述。

来源

2017-04-04 17:42:31 philipp

感谢您的解释。 –

你如何使SVG'使用'标签的内容动态？

回答

相关问题