/suto3/SVG:textPath要素 - Scrapbox Reader

generated at 2/17/2025, 9:27:15 AM

SVG:textPath要素
<textPath> - SVG: Scalable Vector Graphics | MDN
xlink:href属性
参照する path要素のURL
starOffset属性
pathにおけるテキスト表示の開始位置
SVG:xlink:href属性
SVG:path要素


tp.svg<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- to hide the path, it is usually wrapped in a <defs> element -->
  <!-- <defs> -->
  <path
    id="MyPath"
    fill="none"
    stroke="red"
    d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
  <!-- </defs> -->

  <text>
    <textPath href="#MyPath">Quick brown fox jumps over the lazy dog.</textPath>
  </text>
</svg>