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>

图片描述

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏