0

我有以下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>

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

例如，在旋转矩形和图像之后，图像在上方和左侧的空白数量与在两个元素旋转之前相同。

由于其他技术限制，我无法对容器组进行轮换。

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

<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 在这里

4

1 回答 1

0

假设您想围绕与矩形相同的旋转点（即 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)
于 2013-08-17T08:14:14.620 回答