svg 动画属性目标属性
简介
动画属性目标属性 用来确定动画作用的属性与其所在的命名空间。
属性列表
attributeName
该属性指定了动画需要操作目标元素的属性。
使用示例:
<rect x="0" y="0" height="10" width="10" fill="silver">
<animate attributeName="rx" values="0;5;0" dur="3s" repeatCount="indefinite"></animate>
</rect>
上面代码中,就指定了 animate
元素执行是 rect
元素的 rx
属性,并配合其他属性来决定 rx
的值如何变化,从而产生动画的效果。
attributeType 不推荐使用
这个属性用来设置 attributeName
值的命名空间。
比如 transform
这个属性,在 css 中也有。当在 HTML 中对 svg 的 transform
属性时进行动画操作时,就需要指定,动画操作的到底是 css 中的 transform
还是 svg 中的 transform
。
attributeType
属性有三个可选值:
-
attributeType="CSS"
该值指定
attributeName
的值是一个 CSS 属性名。 -
attributeType="XML"
该值指定
attributeName
的值是一个 XML 属性名,它会在目标元素的默认 XML 命名空间里。 -
attributeType="auto"
该值编译器会优先使用满足
attributeName
的 CSS 属性,如果没有再从 svg 命名空间中寻找使用。
示例:
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 1.1 1.1"
to=" 360 1.1 1.1"
dur="10s"
repeatCount="indefinite"
></animateTransform>
上面代码中,操作的属性是 transform
,这个属性在 css 中也存在。此时你想使用 svg 命名空间内的 transform
,就需要使用 attributeType="XML"
来指定 transform
的命名空间。但是这个属性你真的不写并不会产生 bug。
在 MDN 上说这个属性未来的版本可能会移除,但是 svg 下个版本估计还得等个十年八年。
另外,在 HTML5 中,这个属性写不写都一样。现在浏览器都会自动识别。
参考
-
attributeName --- MDN
-
attributeType --- MDN