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

Question

<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>

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

Answer 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>