仅更改 <object> 标签的属性，其中包含使用 jQuery 的 SVG 元素

Question

我正在处理其中包含 SVG 图像的对象元素。我知道为了 select 里面的 SVG 我必须这样做：

var svgObject = $('#SVG_Object')[0].contentDocument ; //Traverse in to the document

/*Now to select the item inside the SVG document*/
$('#SVG_Item',svgObject).css({'fill':'lime'}) ;//select the item and change its color

我们都知道，我们不能直接select SVG，我们必须通过上述步骤才能对SVG进行一些更改。现在，问题来了，有没有办法 select ONLY 对象标签作为一个整体，并作为一个整体对对象标签进行更改？问题具体在于定位。我有这种情况：

<!--HTML--> <object data="img/image.svg" id="SVGObject"><object>

/*CSS*/ #SVGObject{position: relative; left: 123px ; top: 123px ;}

/*Javascript*/ $('#SVGbject').animate({'left':523},600,'linear');

从上面的代码可以看出，我只想对象标签的定位动画，而不是SVG本身的动画。当然，代码不起作用，但是，有没有办法做到这一点？ 非常感谢您的回复。如果描述不够，请原谅我如果您需要有关此场景的更多信息，请告诉我。感谢您的帮助！！

Answer 1

您的jQuery代码有错误...否则，它是正确的；您可以为对象设置动画 ...

改变...

$('#SVGbject').animate({'left':523},600,'linear');

...到...

$('#SVGObject').animate({'left':523},600,'linear');

使用正确的参考，它有效：http://jsfiddle.net/rfornal/uopzupn7/

添加了一个 Plunk，以便根据下面的文档更好地处理外部 SVG 文件。

http://plnkr.co/edit/tQiscH?p=preview

仅更改 <object> 标签的属性，其中包含使用 jQuery 的 SVG 元素

Changing the properties of the <object> tag ONLY, which contains an SVG element using jQuery

javascript

jquery

html

css

svg