用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，并在下面转载。请注意，这种方法迫使您自己在javascript中构建根<svg>标记和属性，而不是加载问题示例中的整个svg文档。

动态创建SVG根元素类似于直接嵌入到网页中。您不必像在页面加载时直接嵌入SVG那样创建脚本标记：

<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 (即，它不能与页面断开连接)。

Answer 2

你可以使用jQuery SVG plugin官方网站宕机了，但是可以到处找找instructions。

我相信你所问的相关部分就是这一部分的答案。

这个包装器加载一个外部

文档。请注意，浏览器可能不允许您从原始页面以外的站点加载文档。如果没有提供回调并出现错误，则在SVG容器内显示错误消息。

url (字符串)是SVG文档或实际SVG文档内联的位置。

设置(布尔值)请参见下面的函数或( addTo )请参见下面的onLoad或(对象)加载以下属性的附加设置：

addTo (boolean，可选) true将现有内容添加到已有内容中，或false (默认值)清除画布第一个changeSize (布尔值，可选) true允许更改画布大小，或false (默认值)保留原始大小onLoad ( function，可选)文档加载后的回调，此函数接收SVG包装器对象和可选错误消息作为参数，其中这是SVG容器的划分。

svg.load('images/rect01.svg',
    {addTo: true, onLoad: loadDone});
svg.load('<svg ...>...</svg>', loadDone);

另外，下面是一些我用来在循环语句中插入这样一个SVG的PHP代码，即worked nicely。

if (ICON_FILE_EXT == "svg") {
        print   "\<script\>svg.load(\'".ICON_PATH."/directory.svg\', \{addTo\: true, onLoad\: loadDone\}\)\;\<\/script\>";