jquery - 使用 JQuery 将 SVG 动态加载到 SVGWeb 中

Question

我正在尝试动态显示一些 SVG 内容。此内容作为字符串存储在我的数据源中。示例字符串如下所示:

<svg width="200" height="200" style="background-color:#D2B48C; margin-bottom:5px;" id="embeddedSVG">
<g id="myGroup" fill="blue" style="font-size:18px; text-anchor:middle; font-family: serif;">
<circle id="myCircle" cx="100" cy="75" r="50" stroke="firebrick" stroke-width="3" />
<text x="100" y="155">Hello World</text><text x="100" y="175">From Embedded SVG!</text>
</g></svg>

为了适应 IE，我使用 SvgWeb 。我的问题是，要显示 svg 内容，我需要将其包装在 <script type="image/svg+xml"></script> 中标签组合。我的挑战是，svg 正在通过 JQuery 异步拉回。而且，据我所知，我无法从 JavaScript 动态编写“脚本”标签。

如何获取使用 JQuery 检索到的 SVG 内容并动态显示它？

Answer 1

找到部分答案 here并转载如下。请注意，此方法会强制您构建根 <svg>自己在 javascript 中添加标签和属性，而不是仅加载问题示例中的整个 svg 文档。

动态创建 SVG 根元素与直接嵌入网页类似。您不必像在页面加载时直接嵌入 SVG 那样创建 SCRIPT 标记:

<script type="image/svg+xml">
  <svg>
    ...
  </svg>
</script>

相反，您遵循与上述类似的过程:

// create SVG root element
var svg = document.createElementNS(svgns, 'svg'); // don't need to pass in 'true'
svg.setAttribute('width', '300');
svg.setAttribute('height', '300');

// create an example circle and append it to SVG root element
var circle = document.createElementNS(svgns, 'circle');
svg.appendChild(circle);

必须使用回调来知道 SVG 何时附加到页面(这是轻微的) 与标准的偏差)。以下是支持的方法:

svg.addEventListener('SVGLoad', function() {
  svg = this; // this will correctly refer to your SVG root
  alert('loaded!');
}, false);
// also supported:
svg.onsvgload = function() {
  alert('loaded!');
}

现在将 SVG 根附加到我们的文档

svgweb.appendChild(svg, document.body); // note that we call svgweb.appendChild

请注意，在上面的代码中，我们必须使用事件监听器来了解 SVG 根何时完成加载到页面中；这与 SVG Web 魔力所需的标准略有不同。

您附加 SVG 根的父级必须已附加到页面上的真实 DOM(即它无法与页面断开连接)。