Question

我有一些SVG元素，应该在悬停时缩放（请参阅下面附带的代码片段）。它在WebKit浏览器上运行良好（将transform-origin: 50% 50%;添加到g元素完成了工作）。但Firefox似乎以自己的方式扩展它（比如需要额外增加translate(x,y)而Edge并没有根据它进行扩展。你有什么建议？我做错了还是应该使用单独的样式不同的浏览器引擎？我想用CSS解决它，但这只是一个例子。有更多的g元素可以用不同的x和y位置进行缩放。

＆＃13;

g {
    transition: all 0.5s;
    cursor: pointer;
    transform-origin: 50% 50%;
}

g:hover {
    transform: scale(1.5);
}

＆＃13;

<svg height="260px" width="1106px" viewBox="0 0 1106 260">
  <g><rect fill="#ffffff" height="13" rx="2" ry="2" stroke="#b3b3b3" stroke-width="1" width="30" x="20" y="78.5"></rect><text fill="#999999" font-family="Verdana" font-size="9" x="25" y="88.5">REC</text></g>
  <g><rect fill="#ffffff" height="13" rx="2" ry="2" stroke="#b3b3b3" stroke-width="1" width="30" x="32.5" y="128.5"></rect><text fill="#999999" font-family="Verdana" font-size="9" x="37.5" y="138.5">REC</text></g>
</svg>

＆＃13;

Answer 1

您认为变换框是填充框，默认情况下它不是视图框。我调整了盒子模型以符合您的预期。

g {
    transition: all 0.5s;
    cursor: pointer;
    transform-origin: 50% 50%;
    transform-box: fill-box;
}

g:hover {
    transform: scale(1.5);
}

<svg height="260px" width="1106px" viewBox="0 0 1106 260">
  <g><rect fill="#ffffff" height="13" rx="2" ry="2" stroke="#b3b3b3" stroke-width="1" width="30" x="20" y="78.5"></rect><text fill="#999999" font-family="Verdana" font-size="9" x="25" y="88.5">REC</text></g>
  <g><rect fill="#ffffff" height="13" rx="2" ry="2" stroke="#b3b3b3" stroke-width="1" width="30" x="32.5" y="128.5"></rect><text fill="#999999" font-family="Verdana" font-size="9" x="37.5" y="138.5">REC</text></g>
</svg>

g {
    transition: all 0.5s;
    cursor: pointer;
    transform-origin: 50% 50%;
}

g:hover {
    transform: scale(1.5);
}

<svg height="260px" width="1106px" viewBox="0 0 1106 260">
  <g><rect fill="#ffffff" height="13" rx="2" ry="2" stroke="#b3b3b3" stroke-width="1" width="30" x="20" y="78.5"></rect><text fill="#999999" font-family="Verdana" font-size="9" x="25" y="88.5">REC</text></g>
  <g><rect fill="#ffffff" height="13" rx="2" ry="2" stroke="#b3b3b3" stroke-width="1" width="30" x="32.5" y="128.5"></rect><text fill="#999999" font-family="Verdana" font-size="9" x="37.5" y="138.5">REC</text></g>
</svg>

如何使用CSS在SVG元素的中心位置使用跨浏览器进行缩放

1 个答案: