时间戳

首页 > 解决方案 > SVG rect 作为它自己的 clipPath

svg - SVG rect 作为它自己的 clipPath

问题描述

我有一些带有文本的SVG矩形。我想避免文本超出矩形边界，因此我使用与矩形尺寸相同的clipPath ：

<g class="blue">
  <rect x="0" y="20" width="852" height="100"></rect>

  <clipPath id="cp2008">
    <rect x="0" y="20" width="852" height="100"></rect>
  </clipPath>

  <text y="70.5" alignment-baseline="middle" text-anchor="middle" fill="white" clip-path="url(#cp2008)">
    <tspan x="426">some long</tspan>
    <tspan x="426" dy="1.5em">text</tspan>
  </text>
</g>

这在一段时间后变得重复。有没有办法缩短上述内容，例如，通过将其指定rect为自己的clipPath？

所有提示表示赞赏。

标签： svgclip-path

解决方案

推荐阅读