我读过一个旋转变换,该变换支持使用 rotate(angle, centerX, centerY)
围绕中心点旋转,但它在通过 CSS 应用时似乎不起作用。
它作为一个属性内联工作:
<svg>
<circle cx="50" cy="50" r="3" style="fill: black"/>
<g id="arrow" style="stroke: black">
<line x1="60" y1="50" x2="90" y2="50"/>
<polygon points="90, 50, 85 45, 85, 55"/>
</g>
<use xlink:href="#arrow" transform="rotate(60, 50, 50)"/>
</svg>
但是通过 CSS 样式规则应用时它不起作用:
#arrow2 {
transform: rotate(60, 50, 50);
}
<svg>
<circle cx="50" cy="50" r="3" style="fill: black"/>
<g id="arrow" style="stroke: black">
<line x1="60" y1="50" x2="90" y2="50"/>
<polygon points="90, 50, 85 45, 85, 55"/>
</g>
<g id="arrow2" style="stroke: red">
<line x1="60" y1="50" x2="90" y2="50"/>
<polygon points="90, 50, 85 45, 85, 55"/>
</g>
</svg>
最佳答案
CSS 和 SVG 的“transform”属性不同。在这种情况下,试试这个:
#arrow2 {
transform: rotate(60deg);
transform-origin: 50px 50px;
}
<svg>
<circle cx="50" cy="50" r="3" style="fill: black"/>
<g id="arrow" style="stroke: black">
<line x1="60" y1="50" x2="90" y2="50"/>
<polygon points="90, 50, 85 45, 85, 55"/>
</g>
<g id="arrow2" style="stroke: red">
<line x1="60" y1="50" x2="90" y2="50"/>
<polygon points="90, 50, 85 45, 85, 55"/>
</g>
</svg>
关于html - 浏览器中的SVG是否支持CSS中重载的rotate()方法rotate(angle, centerX, centerY)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57465645/