Javascript 从img标记内部更改SVG文本_Javascript_Jquery_Svg

Javascript 从img标记内部更改SVG文本

javascript jquery svg

Javascript 从img标记内部更改SVG文本,javascript,jquery,svg,Javascript,Jquery,Svg,我正在尝试使用jquery动态更改img标记中svg项的文本。我一直抓错了节点，因为所有的板子都说要改变文本内容，但它从不改变文本。这是我的HTML： <head> <script type="text/javascript"> $(window).resize(function() { $('.ball').height($(window).height()+"px" ); $('

我正在尝试使用jquery动态更改img标记中svg项的文本。我一直抓错了节点，因为所有的板子都说要改变文本内容，但它从不改变文本。这是我的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>


$（窗口）。调整大小（函数（）{
$（'.ball'）.height（$（window.height（）+“px”）；
$（'.ball'）.width（$（window.width（）/6+“px”）；
});
$（函数（）{
$（“.ball”）。每个（函数（索引）{
var textNode=$（这个）；
textNode=textNode.find（“.changeText”）；
textNode=textNode.children（）.first（）；
console.log（textNode）；
textNode.textContent=“5”；
});
});
$（window.trigger（'resize'）；

下面是我尝试动态加载的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>

您的

textNode

是一个jQuery对象。使用

[0]

从中提取DOM对象，而不是

first（）

，因为DOM节点具有

。textContent

，jQuery对象没有

或者，在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”）

150
您无法从DOM访问
标记内的任何内容。这不是文档的一部分，其中的任何内容都无法访问文档
对于您的问题，可以使用
或
元素来访问它（），

使用和修改（更难、更慢和..实际上不要这样做）。
如果您想访问加载的文档，则需要使用
而不是图像。以及其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标签中还是在forEach中？我不知道为什么不能，但在他们里面似乎不起作用。我必须排除故障。我想把它保存在一个img标签中，这样更容易加载它们，我想在屏幕上放置大约100个，文本上有顺序号。