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 Root元素与直接嵌入网页类似。您不必像在页面加载时直接嵌入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（即无法从页面断开连接）。

Answer 2

您可以使用jQuery SVG plugin官方网站已停用，但请查看instructions。

您要问的相关部分是本节的答案，我相信..

load（url，settings）这个包装器Load   外部SVG文档。注意   浏览器可能不允许您加载   来自其他网站的文件   原始页面。如果没有回调   提供，并出现错误，   错误信息显示在   SVG容器。

url（string）是的位置   SVG文档或实际的SVG   文件内联。

settings（boolean）请参阅下面的addTo或   （功能）见下面的onLoad或   （对象）的附加设置   使用以下属性加载：

addTo（boolean，optional）true to   添加已经存在的内容，或者是假的   （默认值）清除画布   第一个changeSize（布尔值，可选）   如果允许画布大小，则为true   更改或假（默认）为   保留原始大小onLoad   （函数，可选）回调之后   文档已加载，此功能   接收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\>";

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

2 个答案: