Question

我想要移动图像和矩形，但只有第一个图像和矩形在将变换应用到“g”时移动。以下是代码：

<g xmlns="http://www.w3.org/2000/svg" style="cursor: move;">
    <image style="pointer-events: none;" stroke-width="1" transform="scale(1) translate(0)" x="526" y="154" width="84" height="48" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="image-path" />
    <rect visibility="hidden" style="cursor: move;" fill="none" pointer-events="all" stroke="none" stroke-width="1" x="526" y="154" width="84" height="48" />
    <image id="warningImage" x="482" y="182" width="20" height="16" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="image-path" />
</g>

使用javascript以编程方式将secong图像添加到g元素。以上是添加secong图像后通过开发人员工具可用的dom结构。谁能告诉我需要什么修复？

Answer 1

您正在将转化应用于第一个image而不是g。如果要转换组及其所有内容，则必须将其应用于组：

    <svg width="800" height="800">
        <g xmlns="http://www.w3.org/2000/svg" transform="scale(1) translate(50,50)" style="cursor: move;">

            <image style="pointer-events: none;" stroke-width="1" x="526" y="154" width="84" height="48" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="image-path" />

            <rect visibility="auto" style="cursor: move;" fill="blue" pointer-events="all" stroke="none" stroke-width="1" x="526" y="154" width="84" height="48" />

            <image id="warningImage" x="482" y="182" width="20" height="16" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="image-path" />
        </g>
    </svg>

转换不适用于所有svg g元素

1 个答案: