首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

lengthadjust

当一个SVG <text><tspan>元素具有特定的长度时,使用该textLength属性进行设置。lengthAdjust属性控制如何将文本拉伸或压缩到该长度。

该属性的两个可能值是spacingspacingAndGlyphs。使用spacing(默认),字母格式被保留,但它们之间的空格可能会增大或缩小。使用时spacingAndGlyphs,整个文本元素被拉伸到文本的方向。

使用lengthAdjust的SVG文本拟合

HTML内容

代码语言:javascript
复制
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
   <g font-face="sans-serif">
      <text x="0" y="20" textLength="300" lengthAdjust="spacing">
         Stretched using spacing only.
      </text>
      <text x="0" y="50" textLength="300" lengthAdjust="spacingAndGlyphs">
         Stretched using spacing and glyphs.
      </text>
      <text x="0" y="80" textLength="100" lengthAdjust="spacing">
         Shrunk using spacing only.
      </text>
      <text x="0" y="110" textLength="100" lengthAdjust="spacingAndGlyphs">
         Shrunk using spacing and glyphs.
      </text>
   </g>
</svg>

结果

扫码关注腾讯云开发者

领取腾讯云代金券