转换不适用于嵌入式 SVG Chrome
Posted
技术标签:
【中文标题】转换不适用于嵌入式 SVG Chrome【英文标题】：Transform is not applied on Embedded SVGs 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" >
<circle cx="5" cy="5" r="4" />
</svg>
</svg>
</body>
</html>您会注意到，当这段代码在 Firefox 中运行时，带有粗红色边框的圆圈会向下移动一点，但当代码在 chrome 中运行时，它会保持原位。
为什么会发生这种情况以及如何解决？
非常感谢！
【问题讨论】：
尝试删除翻译中的逗号。当涉及到 transform 属性时，SVG 的语法与 CSS 略有不同。它们都有效，所以我会说这很愚蠢，但就是这样。 @somethinghere 感谢您的回复，非常感谢您的帮助，但问题仍然存在。它仅适用于火狐。 :( 下面的答案解释了这种情况。你正在尝试一些非常新颖的东西，所以还没有支持。 【参考方案1】：<svg> 元素上的transform 属性是随 SVG 2 规范添加的功能。它的实现还是有点不平衡。
只需设置属性y="50" 即可达到相同的效果，或者，如果由于某种原因您无法这样做，请将<svg> 元素包装在<g> 中并在那里应用转换。
【讨论】：
非常感谢您的回复。你帮了我很多！非常感谢！以上是关于转换不适用于嵌入式 SVG Chrome的主要内容，如果未能解决你的问题，请参考以下文章
Embedded Jetty HTTP/2 不适用于 Firefox/Chrome，但在 Safari 上似乎没问题