svg中的文字如何已自己为中心旋转

hazymoon
  • 16
<svg xmlns="http://www.w3.org/2000/svg" width="112px" height="112px">
    <rect x="0" y="0" width="112" height="112" stroke="red" stroke-width="3px" fill="white"></rect>
    <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" stroke="#000000" opacity="0.8" font-weight="100" font-size="16" font-family="microsoft yahe">
        这里是一段内容
    </text>
</svg>

clipboard.png

这样的一个svg,应该如何让中间的文字已自己为中心旋转x度

回复
阅读 5.2k
1 个回答
✓ 已被采纳
  • text的位置不要用x,y做定位
  • translate做偏移,如果要居中的话.用父级宽高的一半.例如你的112/2 = 56 translate(56,56)
  • 然后再rotate
此例中transform是标签属性.不是css
 <svg xmlns="http://www.w3.org/2000/svg" width="112px" height="112px">
    <rect x="0" y="0" width="112" height="112" stroke="red" stroke-width="3px" fill="white"></rect>
    <text  stroke="#000000" transform="translate(56,56) rotate(20)" alignment-baseline="middle" text-anchor="middle" opacity="0.8" font-weight="100" font-size="16" font-family="microsoft yahe">
        这里是一段内容
    </text>
</svg>

图片描述

宣传栏