如何将 CSS 转换或过滤器添加到现有的内联 SVG 转换或过滤器？

【问题标题】：How to add a CSS transform or filter to an existing inline SVG transform or filter?如何将 CSS 转换或过滤器添加到现有的内联 SVG 转换或过滤器？
【发布时间】：2022-01-26 13:52:11
【问题描述】：

在不知道内联 SVG 变换或过滤器是什么的情况下，如何使用 CSS 将额外的变换或过滤器应用于同一元素？

无论我尝试什么，我的 CSS 转换或过滤器都会覆盖内联 SVG 转换/过滤器，而不是添加到其中。

例如，我的 SVG 中有： <circle r="50" transform="translate(100,100)">

然后我尝试使用 CSS 变换来缩放这个圆圈，而不删除它的初始平移变换：

circle {
  transform: initial scale(0.5);
}

但是，原始平移被比例变换所取代，它们没有被添加。同样的问题也适用于过滤器。

【问题讨论】：

这不是 CSS 语义的一部分。您需要将它们应用到父元素。

标签： css svg filter transform

【解决方案1】：

正如@ccprog 所说。将元素包装在父 <g> 元素中，然后对其应用转换或过滤器。

<g>
  <circle r="50" transform="translate(100,100)">
</g>

g {
  transform: scale(0.5);
}

但是，请注意，这可能会产生与您预期不同的结果。以下两个 SVG 不等价。

<g transform="scale(0.5)">
  <circle r="50" transform="translate(100,100)">
</g>

<g>
  <circle r="50" transform="translate(100,100) scale(0.5)">
</g>

您需要修改应用于组的转换以获得等效结果。

相当于

<g>
  <circle r="50" transform="translate(100,100) scale(0.5)">
</g>

要么是

<g transform="scale(0.5) translate(100,100)">
  <circle r="50" transform="translate(100,100)">
</g>

或

<g transform="translate(50,50) scale(0.5)">
  <circle r="50" transform="translate(100,100)" fill="blue"/>
</g>

【讨论】：