Question

我有一个svg加载到像这样的对象标签

<object id="garageFile" type="image/svg+xml" data="/images/garage.svg"></object>

在garage.svg里面是一条路径

...
<g>
    <path id="gateRight" state="close" fill="#21100C" d="M1075.823,637.254l606.078,25.422l1.229-504.793l-610.07,2.066"/>
</g>
...

我想做的是使用id gateRight为路径设置动画。因此，我创建了一个包含以下内容的CSS

 .gateRightOpenFast {
    -webkit-transition: all 2s linear;
    -moz-transition: all 2s linear;
    -ms-transition: all 2s linear;
    -o-transition: all 2s linear;
    transition: all 2s linear;
}

.gateRightOpenFast {
    -moz-transform: rotateX(74deg) rotateZ(-1deg);
    -webkit-transform: rotateX(74deg) rotateZ(-1deg);
    -ms-transform: rotateX(74deg) rotateZ(-1deg);
    -o-transform: rotateX(74deg) rotateZ(-1deg);
    transform: rotateX(74deg) rotateZ(-1deg);
}

要启动动画，请运行此javascript代码

var garageObject = document.getElementById('garageFile');
var garageSvgDoc;

$('body').find('#garageFile').load("image/svg+xml", function() {
    garageSvgDoc = garageObject.contentDocument;

    $( garageSvgDoc ).find('#gateRight').attr('class', 'gateRightOpenFast');
}

我的问题是动画不会这样工作。

Asn另一种选择我尝试直接在html文件中添加svg并使用以下命令加入

$( '#gateRight' ).attr('class', 'gateRightOpenFast');

一切正常。

有人可以解释一下如何使用加载svg作为对象的css动画吗？

Answer 1

添加行

<?xml-stylesheet href="mystyle.css" type="text/css"?>

以first line in that file身份登录SVG文件。注意用你的CSS文件的实际名称替换mystyle.css。

如果您的SVG文件不了解您的CSS文件，则无法使用该CSS文件中包含的任何动画。

内部对象的svg元素不会触发css动画

1 个答案: