Question

我正在尝试使用jquery动态更改img标记内的svg项目的文本。我一直在抓错节点，因为所有的电路板都说要更改textContent，但它永远不会改变文本。这是我的HTML：

<head>
<script type="text/javascript">
            $(window).resize(function() {
                $('.ball').height($(window).height()+"px" );
                $('.ball').width($(window).width()/6+"px");
            });
            $(function() {
                $( ".ball" ).each(function( index ) {
                    var textNode = $(this);
                    textNode = textNode.find(".changeText");
                    textNode = textNode.children().first();
                    console.log(textNode);
                    textNode.textContent = "5";
                });
            });
            $(window).trigger('resize');
        </script>
    </head>
    <body>
        <div id="svgMain">
            <img class="ball" src="ball.svg"/>
            <img class="ball" src="ball.svg"/>
            <img class="ball" src="ball.svg"/>
            <img class="ball" src="ball.svg"/>
            <img class="ball" src="ball.svg"/>
            <img class="ball" src="ball.svg"/>
        </div>
    </body>

然后这是我试图动态加载的img标签中的svg：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <g>
        <circle cx="50%" cy="50%" r="50%"/>
        <text class="changeText" text-anchor="middle" x="50%" y="60%" font-family="Verdana" font-size="35" fill="blue" ><tspan>150</tspan>  </text>
    </g>
</svg>

Answer 1

您无法访问DOM中<img>标记内的任何内容。这不是文档的一部分，它内部的任何内容都不能访问该文档。

对于您的问题，请使用<iframe> <object>或<embed>元素来访问它（plnkr），
要么使用又要修改dataURIs（更难，更慢，而且......实际上并没有这样做。）

Answer 2

您的textNode是一个jQuery对象。取first()而不是[0]从中提取DOM对象 - DOM节点有.textContent，jQuery对象没有。{/ p>

或者，在jQuery对象上使用.text setter。这两种方法都有效。

var textNode = $('svg');
textNode = textNode.find(".changeText");
textNode = textNode.children()[0];
textNode.textContent = "5";

var textNode = $('svg');
textNode = textNode.find(".changeText");
textNode = textNode.children();
textNode.text("7");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <g>
    <circle cx="50%" cy="50%" r="50%" />
    <text class="changeText" text-anchor="middle" x="50%" y="60%" font-family="Verdana" font-size="35" fill="blue">
      <tspan>150</tspan>
    </text>
  </g>
</svg>

Answer 3

如果要访问加载的文档，则需要使用<object data="ball.svg">而不是图像。及其HTMLObjectElement.contentDocument引用以获取对其内容的访问权。

这样的事情：

            $( "object.ball" ).each(function( index ) {
                var textNode = $(this.contentDocument);
                textNode = textNode.find(".changeText");
                textNode = textNode.children().first();
                console.log(textNode);
                textNode.textContent = "5";
            });

从img标签内部更改SVG文本

3 个答案: