将HTML SVG文本旋转270度 [英] Rotate HTML SVG Text by 270 degrees

问题描述

我读过这个，有点类似的问题

解决方案

<这似乎大致符合图纸。默认情况下，左下角的旋转原点。

< svg> < g取代; < rect x =0y =0width =20height =75fill =whitestroke =＃CCCstroke-width =0.5>< / rect> < text x =2y =73font-size =10> 1< / text> < / g取代; < g取代; < rect x =20y =0width =20height =75fill =whitestroke =＃CCCstroke-width =0.5>< / rect> < text x =22y =73font-size =10> 2< / text> < / g取代; < g取代; < rect x =40y =0width =20height =75fill =whitestroke =＃CCCstroke-width =0.5>< / rect> < text x =42y =73font-size =10> 3< / text> <！ - 试图旋转270度 - > < text transform =rotate（270,42,73）translate（10,10）x =42y =73font-size =10>缺少< / text> < / g取代; < g取代; < rect x =60y =0width =20height =75fill =whitestroke =＃CCCstroke-width =0.5>< / rect> < text x =62y =73font-size =10> 4< / text> < / svg>

I'm struggling to understand how the rotation of text works with the Html SVG Text tags.

I read this, somewhat, similar question rotate x axis text in d3 but the answer doesn't really seem to apply - that i can figure anyway.

Take the following SVG Markup:

<svg>
  <g>
    <rect x="0" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="2" y="73" font-size="10">1</text>
  </g>
  <g>
    <rect x="20" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="22" y="73" font-size="10">2</text>
  </g>
  <g>
    <rect x="40" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="42" y="73" font-size="10">3</text>
    <!-- Trying to rotate this 270 degrees -->
    <text x="42" y="73" font-size="10">Missing</text>
  </g>
  <g>
    <rect x="60" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="62" y="73" font-size="10">4</text>
  </g>
</svg>

There is some text, in the 3rd group; 'Missing'

I am trying to rotate this 270 degrees, but struggling to understand where it rotates from. I have read it rotates from the origin, but what is the origin in this?

I've tried things like transform="rotate(270, 42, 73)" and various other numbers in place of 42 and 73. I can eventually, with guesswork, get it in the right position though without understanding how it actually works, then i can't add text to the other groups and rotate it.

So, how do i rotate this and, in laymen terms, how does it work?

For clarification - I am looking to achieve:

解决方案

This seems to roughly match the drawing. The rotation origin at the bottom left by default.

<svg>
  <g>
    <rect x="0" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="2" y="73" font-size="10">1</text>
  </g>
  <g>
    <rect x="20" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="22" y="73" font-size="10">2</text>
  </g>
  <g>
    <rect x="40" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="42" y="73" font-size="10">3</text>
    <!-- Trying to rotate this 270 degrees -->
    <text transform="rotate(270, 42, 73) translate(10,10)" x="42" y="73" font-size="10">Missing</text>
  </g>
  <g>
    <rect x="60" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="62" y="73" font-size="10">4</text>
  </g>
</svg>

这篇关于将HTML SVG文本旋转270度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！