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

时间:2015-01-13 15:27:13

标签: javascript jquery html css svg

我正在处理一个包含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进行一些更改。接下来是问题,是否有办法选择 ONLY 整个Object标签,并将对象标签作为整体进行更改?问题特别在于定位。我有这种情况:

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

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

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

从上面的代码中可以看出,我想要动画 ONLY 对象标签的定位,而不是动画SVG本身。当然,代码不起作用,但是,有办法吗? 我非常感谢你的回复。如果描述不够,请原谅我如果您需要有关此方案的任何进一步信息,请告诉我。谢谢你的HElP !!

1 个答案:

答案 0 :(得分: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