更改 <对象> 标记的属性,该标记使用 jQuery 包含一个 SVG 元素

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

本文关键字:包含一 jQuery 元素 SVG 属性 对象 更改      更新时间:2023-09-26

我正在处理一个包含SVG图像的对象元素。我知道为了在其中选择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 

我们都知道,我们不能直接选择 SVG,我们必须完成上述步骤才能对 SVG 进行一些更改。现在,这里有一个问题,有没有办法选择整个对象标签并对对象标签进行更改?问题具体在于定位。我有这种情况:

<!--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 本身进行动画处理。当然,代码不起作用,但是,有办法做到这一点吗?我非常感谢您的回复。如果描述不够,请原谅我,如果您需要有关此情况的任何进一步信息,请告诉我。感谢您的HElP!

你的 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