`transform-origin` 是有效的 SVG 2 属性吗?

Is `transform-origin` a valid SVG 2 attribute?

我对transform-origin属性感到困惑。

根据 latest SVGV 2 draft it's a required CSS property.

根据 MDN page on SVG Presentation Attributes it's not a CSS properties that can be used as attributes on SVG elements. However according to that same page, most browsers support it as an attribute. And according to the MDN page on transform-origin 这听起来像是一个 SVG 属性。

其他 SVG 用户 agents/editors 例如 Inkscape 似乎不支持它作为属性或样式 属性。 Inkscape 使用自己的 inkscape:transform-center-xinkscape:transform-center-y 属性。

我不太确定混淆是什么,但是 MDN 的这句话可能会有所帮助:

The transform-origin SVG attribute sets the origin for an item’s transformations.

You can use this attribute with any SVG element.

Note: As a presentation attribute in SVG, transform-origin corresponds in syntax and behavior to the transform-origin property in CSS, and can be used as CSS property to style SVG. See the CSS transform-origin property for more information.

CSS 属性 和属性之间可能有些混淆。尽管在这种情况下它们具有相同的行为,但它们并不相同。

我通过 CSS 或作为属性使用它都没有问题。如果仍然存在问题,也许您可​​以 post 一些演示它的代码,我们可以再看看。

在 SVG 1.1 中,几乎所有 CSS 属性也可用作映射属性,即您可以编写 style="display: none" 或 display="none"

首次创建 SVG 2 规范时,作者建议不会继续使用新的 CSS 属性,即它们不会映射到属性。

Chrome 然而,Safari 将 transform-origin 映射到一个属性并最终与 兼容,Firefox 也是如此。

有人 open issue on the SVG 2 specification 建议更改规范以反映现实。