Question

如果我在svg图像中动态加载一些svg数据，我可以在检查DOM时看到它，但它实际上并没有出现在浏览器中。下面是一个简单的例子，我尝试在一个较大的矩形内放一个小矩形。预组合的SVG图像具有完全相同的内容，但是当我尝试使用jquery动态组合它们时，内部矩形永远不会出现。我误解了什么？

的test.html：

<html>
<head>
<title>SVG test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#already-combined").load("test_combined.svg svg"); //works
    $("#combine").load("test_outer.svg svg", function() {
        $(this).find("svg").append("<g id=\"appended\"></g>");
        // present when inspecting DOM, but is never visible...
        $("#appended").load("test_inner.svg svg > *");
    });
});
</script>
</head>
<body>
<h3>Already combined...</h3>
<div id="already-combined"></div>
<h3>Combine in javascript...</h3>
<div id="combine"></div>
</body>
</html>

test_combined.svg：

<svg width="100" height="100">
  <rect x="1" y="1" fill="none" stroke="#000000" width="75" height="75"/>
  <g>
    <rect x="25" y="25" fill="none" stroke="#000000" width="25" height="25"/>
  </g>
</svg>

test_outer.svg：

<svg width="100" height="100">
  <rect id="outer" x="1" y="1" fill="none" stroke="#000000" width="75" height="75"/>
</svg>

test_inner.svg：

<svg width="100" height="100">
  <rect id="inner" x="25" y="25" fill="none" stroke="#000000" width="25" height="25"/>
</svg>

这是通过在firefox中检查看到的DOM：

<html><head>
<title>SVG test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#already-combined").load("test_combined.svg svg");
    $("#combine").load("test_outer.svg svg", function() {
        $(this).find("svg").append("<g id=\"appended\"></g>");
        $("#appended").load("test_inner.svg svg > *");
    });
});
</script>
</head>
<body>
<h3>Already combined...</h3>
<div id="already-combined"><svg width="100" height="100">
  <rect x="1" y="1" fill="none" stroke="#000000" width="75" height="75"></rect>
  <g>
    <rect x="25" y="25" fill="none" stroke="#000000" width="25" height="25"></rect>
  </g>
</svg></div>
<h3>Combine in javascript...</h3>
<div id="combine"><svg width="100" height="100">
  <rect id="outer" x="1" y="1" fill="none" stroke="#000000" width="75" height="75"></rect>
<g id="appended"><rect id="inner" x="25" y="25" fill="none" stroke="#000000" width="25" height="25"></rect></g></svg></div>

</body></html>

Answer 1

剪下新代码，然后将其重新粘贴回来。

更具体地说，更改以下行...

$("#appended").load("test_inner.svg svg > *", function() { $("#combine").html($("#combine").html()); });

...到...

core-js

这几乎就像你必须强制手动屏幕或div刷新一样。这看起来很奇怪，而且很烦人。

一些想法：这可能是浏览器实现SVG的一个错误（但请参阅下面关于浏览器的评论）。它可能与动态相互网格化两个不同的DOM，HTML和SVG有关。它可能与依赖于jQuery有关，它通过它对SVG主题的沉默，似乎它从未保证它应该与SVG一起工作（以及为什么其他一些人已经编写了插件/库来让它做到这一点）。 HMM。

（顺便说一句，此解决方案适用于Firefox（v44.0.2）和Safari（v9.0.3），但即使您的原始代码也未在Chrome（v48.0.2564.103）或Opera中显示任何SVG （v35.0.2066.37）。我没有检查Internet Explorer。）

Answer 2

这是与jQuery相关的东西。使用香草JS对我有用：

var svg = document.getElementsByTagName('svg')[0];
svg.insertAdjacentHTML('beforeend', '<g>...</g>');

如何使用jquery动态添加元素到SVG图像？

2 个答案: