转换不适用于嵌入式 SVG Chrome答案

【问题标题】：Transform is not applied on Embedded SVGs Chrome转换不适用于嵌入式 SVG Chrome
【发布时间】：2020-12-30 23:33:51
【问题描述】：

我是使用 SVG 的新手，但一切都很好，直到我在 chrome 上尝试了我的代码并发现它不能正常工作，所有的转换属性都被忽略了。 Firefox 按预期完成。

我的问题是，当我将它分配给嵌入式 SVG（SVG 内的 SVG）时，transform 属性不起作用。 Firefox 不会出现此问题。

这是一个示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" type="text/css" />

    <title>Document</title>
  </head>
  <body>
    <svg
      viewBox="0 0 300 100"
      xmlns="http://www.w3.org/2000/svg"
      stroke="red"
      fill="grey"
    >
      <circle cx="50" cy="50" r="40" />
      <circle cx="150" cy="50" r="4" />

      <svg transform="translate(0,50)" viewBox="0 0 10 10" x="200" width="100">
        <circle cx="5" cy="5" r="4" />
      </svg>
    </svg>
  </body>
</html>

您会注意到，当这段代码在 Firefox 中运行时，带有粗红色边框的圆圈会向下移动一点，但当代码在 chrome 中运行时，它会保持原位。

为什么会发生这种情况以及如何解决？

非常感谢！

【问题讨论】：

尝试删除翻译中的逗号。当涉及到 transform 属性时，SVG 的语法与 CSS 略有不同。它们都有效，所以我会说这很愚蠢，但就是这样。
@somethinghere 感谢您的回复，非常感谢您的帮助，但问题仍然存在。它仅适用于火狐。 :(
下面的答案解释了这种情况。你正在尝试一些非常新颖的东西，所以还没有支持。

标签： html svg

【解决方案1】：

<svg> 元素上的transform 属性是随 SVG 2 规范添加的功能。它的实现还是有点不平衡。

只需设置属性y="50" 即可达到相同的效果，或者，如果由于某种原因您无法这样做，请将<svg> 元素包装在<g> 中并在那里应用转换。

【讨论】：

非常感谢您的回复。你帮了我很多！非常感谢！