Question

我有一个SVG元素，如下所示：

<image
  xmlns="http://www.w3.org/2000/svg"
  overflow="visible"
  width="54"
  height="54"
  id="Content-Author-Off_xA0_Image"
  xlink:href="data:image/png;base64,..."
  transform="matrix(1 0 0 1 0 108)">
</image>

是否可以使用CSS覆盖transform属性？我试过这个并不起作用：

image {
    transform: none;
}

Answer 1

CSS不能仅影响属性的CSS属性。您可以尝试首先使用CSS转换而不是SVG属性转换，但并非所有UAs都支持SVG元素上的CSS转换。

这是一个带有rect元素的CSS变换的例子。将鼠标放在它上面以查看它的变化。

rect {
    transform: translate(50px, 0) rotate(30deg);
}

rect:hover {
  transform: none;
}

<svg>
  <rect x="30" y="30" width="50" height="50" fill="red"/>
</svg>

Answer 2

看起来transform: none在所有浏览器中都不起作用（请参阅bugreport），但可以通过使用单位矩阵解决这个问题，例如transform: scale(1)。 stylerules将覆盖属性，如以下代码段所示：

circle {
    transform-origin: 50%;
    transform: scale(1);
    transition: transform 0.5s;
}

circle:hover {
    transform: scale(2);
}

<svg>
    <circle cx="50" cy="50" r="25" transform="translate(500 500)"/>
</svg>

与fiddle相同。

使用CSS覆盖SVG转换属性

2 个答案: