Question

Snap.svg的Snap()函数的文档列出了创建Snap对象的三种可能方法。

Snap(width, height) - 创建一个给定尺寸的新空白画布。
Snap(svg element) - 从现有的内联SVG元素创建Snap画布
Snap(css selector) - 与上述相同，但使用选择器而不是直接引用

是否可以从作为<object>元素嵌入的SVG或<img>创建Snap对象？

Answer 1

通过查看源代码，我认为只做一个Snap('#object-id')会给你SVG，而不是.node.contentDocument。这可能是最近的改进，但截至今天，这在代码中正式出现。

以下是支持源代码：https://github.com/adobe-webplatform/Snap.svg/blob/5b17fca57cbc4f8a8fd9ddd55cea2511da619ecf/dist/snap.svg.js#L3182-L3184

Answer 2

我唯一能想到的东西可能是有用的，就是使用像object标记这样的东西，使用contentDocument（可能需要检查支持，但Snap并不是真正针对旧浏览器）。

我认为svg图像必须是文件的本地图像，所以远程调用图像我认为不会起作用（或者可能有一些修改过的服务器设置），所以我无法使用它小提示，只需用下面的测试网址，所以代码就像......

in html ...

<object id="tux" data="Dreaming_Tux.svg" width="600" height="600" type="image/svg+xml"></object>

然后是js ....

var tux = Snap("#tux");
var tuxContent = tux.node.contentDocument;   /// grab the referenced content

var sTux = Snap( tuxContent.firstChild );    /// snapify it
var tuxPaths = sTux.selectAll('path');       /// use snaps selector to grab elements

tuxPaths.forEach( function( el ) { el.attr({ opacity: 0.2 }) });

testing example here

Answer 3

如果您从同一个域提供svg，最好的方法是使用带有Element.node标记的Snap <object>。例如。你不能在文件系统中使用它，你必须设置一个本地服务器（同源策略）。

如果你有

<object id="graph" data="somevectors.svg" type="image/svg+xml"></object>

然后你可以使用这个

var s = Snap(Snap("#graph").node); //wrap the element

然后用CSS选择器选择svg元素并乱用它们

var circle = s.select("#circle")
   .attr({
      opacity: .3
   });

Answer 4

@kumar_harsh是正确的。就是说，由于页面加载问题，我无法使其正常运行。即使在window.onload回调内部，Snap('#object-id')仍返回null或返回对象标记，里面没有任何内容。

要使用简单的Snap('#object-id')，我必须使用文档here中演示的方法：

1）用空的svg标记（#object-id-> #svg-id）替换对象标记

2）var s = Snap(#svg-id)

3）使用Snap.load('/path/to/my/svg.svg')

加载svg元素

4）在加载回调函数s.append(resultData);

5）使用捕捉

如果您的代码在浏览器控制台中有效，但无法运行，那么您可能会遇到相同的问题，解决方案就在上面。

从<object>元素</object>创建Snap.svg对象

4 个答案: