Question

旋转svgs，不切断。
Fiddle

    <div id='marker' style='display:none'>

     <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="450mm" height="450mm" id="svg111" version="1.1">
        <g id="trans" x='65' y='65' transform=' rotate(0)' >
           <path id="p1"fill="red"fill-opacity="1"d="M23.891,85.702c31.965-3.284,45.401-20.078,45.401-20.078l-0.017-0.015c0.01-0.01,16.158-14.203,17.963-46.274c-5.043-1.163-86.9-19.556-86.9-19.556l34.483,32.93L0.353-0.207C0.353-0.207,22.498,80.717,23.891,85.702z" />
        </g>

    </svg>
   </div>

    document.getElementById('svg111').setAttribute('transform', "rotate(" + Math.floor(Math.random() * 350) + 1 + ")");

我正在显示用html制作的svgs并将其用作谷歌地图的标记，现在问题是“当我旋转这些预定义的svgs时，它们会切断，无论我做什么，它们都会被切断。现在我明白这发生了，因为它走出了视野区域，我一直试图让它显示一切，无论旋转的程度如何，但它似乎切断了即使我的svg的三倍大小。我也需要它在它的尖端上旋转，所以将锚定旋转在中心不是一个可悲的选择。任何推动正确的方向将不胜感激

旋转导致Svgs被切断

0 个答案: