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

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

阅读 2.9k
评论
    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>

    图片描述

      撰写回答

      登录后参与交流、获取后续更新提醒

      相似问题
      推荐文章