Question

我有以下svg：

<svg 
    width="1750" 
    height="1125" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
        <g id="svg_4">
        <g id="imgG_4">
        <image 
            transform="rotate(35.3608 608.333 503.301)" 
            xlink:href="https://www.google.com/images/srpr/logo4w.png" 
            id="img_4" 
            height="188.79927" 
            width="188.79927" 
            y="408.90001" 
            x="706.21582"/>
       </g>
       <rect 
           transform="rotate(35.3608 783.333 667.587)" 
           id="border_4" 
           height="264.31644" 
           width="360.92146" 
           y="535.42838" 
           x="602.87256" 
           fill-opacity="0" 
           stroke-width="5" 
           stroke="#000000" 
           fill="#000000"/>
       </g>
   </g>
</svg>

我想改变矩形和图像的角度。但是，我无法弄清楚如何调整图像，使得当我旋转矩形时，它在矩形内的间距是一致的。

E.g。在旋转矩形和图像之后，图像在两个元素旋转之前的上方和左侧具有相同数量的空白。

由于其他技术限制，我无法将旋转放在容器组上。

我想最终得到类似的东西：

<svg
    width="1750"
    height="1125"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
        <g
            id="svg_4">
            <g
                id="imgG_4">
                <image
                    transform="rotate(70.3608 608.333 503.301)"
                    xlink:href="https://www.google.com/images/srpr/logo4w.png"
                    id="img_4"
                    height="188.79927"
                    width="188.79927"
                    y="408.90001"
                    x="706.21582"
                    />
            </g>
            <rect
                transform="rotate(70.3608 783.333 667.587)"
                id="border_4"
                height="264.31644"
                width="360.92146"
                y="535.42838"
                x="602.87256"
                fill-opacity="0"
                stroke-width="5"
                stroke="#000000"
                fill="#000000"
                />
        </g>
    </g>
</svg>

需要注意的是，x，y值必须在图像上进行更改才能使布局正确，并且我知道如何计算它们。

关于我如何做到这一点的任何想法？我将使用javascript进行数学处理...

Plnkr是here

Answer 1

假设您想要围绕与矩形相同的旋转点旋转两个元素（即783.333,667.587），那么您需要的只是将附加旋转应用于两个元素变换的前面。所以：

<image transform="rotate(90 783.333 667.587) rotate(70.3608 608.333 503.301)"
<rect  transform="rotate(90 783.333 667.587) rotate(70.3608 783.333 667.587)"

将两个元素在上面的旋转中心周围再旋转90度。

但是你说你想在Javascript中自己做数学。所以为了让你开始，知道变换可能会有所帮助：

rotate(r x y)

相当于：

translate(x y) rotate(r) translate(-x -y)

SVG - 如何定义两个不同元素的转换

1 个答案: