SVG Properties/Presentation 属性和 Style-attribute答案

【问题标题】：SVG Properties/Presentation attributes and Style-attributeSVG Properties/Presentation 属性和 Style-attribute
【发布时间】：2018-08-20 13:30:18
【问题描述】：

你可以在元素中声明Properties/Presentation attributes：

<rect width="50" height="50" fill="blue" />

或者你可以在style-attribute 中声明它们，如果元素支持的话：

<rect width="50" height="50" style="fill:blue;" />

但是，一些元素不支持style-属性，但它们支持一些Properties/Presentation attributes。一个例子是Animate-element。

为什么不是所有支持Properties/Presentation attributes 的元素都不支持style-属性？

我正在使用SVG 1.1 (Second Edition) – 16 August 2011 规范。

【问题讨论】：

为什么要设置动画样式？这样做是没有逻辑的......动画是为了添加一个动作而不是一个元素
'animate' 元素用于随着时间的推移为单个属性或属性设置动画 ---> 那么这里样式的目的是什么？样式什么？
@Temani Afif：为什么要使用animate-元素可以包含的多个Presentation attributes 中的任何一个？为什么不能在style-attribute 中声明这些properties？我说的是一般的这类元素，而不是特别是animate。
因为它们不是用来设置元素样式的
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />--> from 是一种风格？？不... rect 的填充是一种风格？是的

标签： css svg properties attributes specifications

【解决方案1】：

演示属性包含在animate 元素的可能属性列表中。但是，如果您查看规格 definition of presentation attributes，您会看到：

请注意，尽管可以在任何元素上指定任何属性，但不能所有属性都将应用于（影响渲染）给定的元素。每个属性的定义说明了哪些集合它适用的元素。

因此，例如，如果您检查 what elements the alignment-baseline applies to，您将不会看到列出的 animate 元素。

在animate 元素的可能表示属性列表中，还有color-interpolation、which does include animate between the list of elements that it applies to。但是没有类似或对应的 CSS 属性，是吗？

【讨论】：

哇——这比我想象的要深得多。 “SVG 的样式属性”部分列出了 CSS2 和 SVG 之间常见的 properties，以及仅特定于 SVG 的那些。所以基本上，你只能给style-attribute添加属性，这在CSS2和SVG之间是通用的（“因为style-attribute里面的语言是CSS2”）。还有一些元素，比如Animate，可能只包含SVG特定的properties，这意味着它们不能被添加到style-attribute。因此，animate 没有style-属性，因为没有什么要添加的。