在悬停时缩放嵌套的SVG

Question

我想在SVG中创建流程图。图表中的每个节点都是嵌套的<svg>元素。我想在悬停时缩放嵌套元素，以实现弹出效果。

这是我的代码，不起作用：

<svg viewBox="0 0 100 100">
    <svg class="card" viewBox="0 0 8 12" width="8" height="12" x="40" y="10">
        <image href="some_url" />
        <text>Some text</text>
    </svg>
</svg>

CSS＃1

.card:hover {
width: 16px;
height: 24px;}

CSS＃2

.card:hover {
transform: scale(2);
transform-origin: 50% 50%;}

是否存在使用此结构的解决方案，还是应该使用<g> -s而不是嵌套的<svg>-s？