svg 动画属性目标属性


简介

动画属性目标属性 用来确定动画作用的属性与其所在的命名空间。

属性列表

attributeNameattributeType

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 中,这个属性写不写都一样。现在浏览器都会自动识别。

参考