标签：SVG Two 插入 Going bend words 文本 round

1、插入文本并设置对其方式

<svg id="svg" xmlns="http://www.w3.org/2000/svg"
  width="500px" height="500px" viewBox="0 0 500 500">
  <g style="font-size:14pt;">
    <path d="M 100 10 100 100" style="stroke:gray;fill:none;"/>
    <text x="100" y="30" style="text-anchor:start">Start</text>
    <text x="100" y="60" style="text-anchor:middle">Middle</text>
    <text x="100" y="90" style="text-anchor:end">End</text>
  </g>
</svg>

2、文本相关属性的使用

<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 500 500">
  <!-- 使用tspan标签 -->
  <text x="10" y="30" style="font-size:12pt;">
    Switch among
    <tspan style="font-style:italic">italic</tspan>,normal,
    and <tspan style="font-weight:bold">bold</tspan> text.
  </text>
  <!-- 使用dy、dx标签 -->
  <text x="10" y="50" style="font-size:12pt;">
    F<tspan dy="4">a</tspan>
    <tspan dy="8">l</tspan>
    <tspan dy="12">l</tspan>
  </text>
  <!-- 在<tspan>中为dx、dy、rotate设置多个值 -->
  <text x="10" y="100" style="font-size:12pt;">
    It's
    <tspan dx="0 4 -3 5 -4 6" dy="0 -3 7 3 -2 -8" rotate="5 10 -5 -20 0 15">shaken</tspan>
    ,not stirred.
  </text>
  <!-- baseline-shift的使用 -->
  <text x="10" y="150" style="font-size:12pt;">
    C<tspan style="baseline-shift:sub;font-size:8pt;">12</tspan>
    H<tspan style="baseline-shift:sub;font-size:8pt;">22</tspan>
    O<tspan style="baseline-shift:sub;font-size:8pt;">11</tspan>
    (sugar)
  </text>
  <text x="10" y="200" style="font-size:12pt;">
    6.02 * 10<tspan baseline-shift="super" style="font-size:8pt;">23</tspan>
    (Avogadro's number)
  </text>
</svg>

3、设置文本长度

<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 500 500">
  <g style="font-size:14pt;">
    <path d="M 20 10 20 70 M 220 10 220 70" style="stroke:gray;"/>
    <!-- spacing只调整字符间距，spacingAndGlyphs同时调整字符间距和字符本身的大小 -->
    <text x="20" y="30" textLength="200" lengthAdjust="spacing">Two words</text>
    <text x="20" y="60" textLength="200" lengthAdjust="spacingAndGlyphs">Two words</text>
    <text x="20" y="90">
      Two words
      <tspan style="font-size:10pt;">(normal length)</tspan>
    </text>

    <path d="M 20 100 20 170 M 100 100 100 170" style="stroke:gray;"/>
    <text x="20" y="120" textLength="80" lengthAdjust="spacing">Two words</text>
    <text x="20" y="160" textLength="80" lengthAdjust="spacingAndGlyphs">Two words</text>
  </g>
</svg>

4、纵向文本

<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 500 500">
  <text x="10" y="20" transform="rotate(90,10,20)">rotated90</text>
  <text x="50" y="20" style="writing-mode:tb;">Writing Mode tb</text>
  <text x="90" y="20" style="writing-mode:tb;text-orientation:upright;letter-spacing:-2">Vertical zero</text>
</svg>

5、文本路径

<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 500 500">
  <defs>
    <path id="curvepath" d="M 30 40 C 50 10 70 10 120 40 S 150 0 200 40" style="stroke:gray;fill:none;" />
    <path id="round-corner" d="M 250 30 L 300 30 A 30 30 0 0 1 330 60 L 330 110" style="stroke:gray;fill:none;" />
    <path id="sharp-corner" d="M 30 110 100 110 100 160" style="stroke:gray;fill:none;" />
    <path id="discontinuous" d="M 150 110 A 40 30 0 1 0 230 110 M 250 110 270 140" style="stroke:gray;fill:none;" />
  </defs>
  <g style="font-family:'liberation Sans';font-size:10pt;">
    <use xlink:href="#curvepath" />
    <text>
      <textpath xlink:href="#curvepath" startOffset="25%">
        Going round the bend
      </textpath>
    </text>

    <use xlink:href="#round-corner" />
    <text style="text-anchor:middle">
      <textpath xlink:href="#round-corner" startOffset="50%">
        Going round
      </textpath>
    </text>

    <use xlink:href="#sharp-corner" />
    <text>
      <textpath xlink:href="#sharp-corner">
        Going round the bend
      </textpath>
    </text>

    <use xlink:href="#discontinuous" />
    <text>
      <textpath xlink:href="#discontinuous">
        Going round the bend
      </textpath>
    </text>
  </g>
</svg>

标签：SVG,Two,插入,Going,bend,words,文本,round
来源： https://www.cnblogs.com/xl4ng/p/15863415.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。