切断SVG文本元素的一半

Question

我该如何制作

看起来像这样

所以我想将文本元素减半。我不想隐藏 SVG 之外的一半文字。将它隐藏在 g 之外会没问题，但是找不到解决方案。

<svg width="500" height="500">
 <g transform="translate(50,50)">
    <rect width="80" height="50" style="fill:rgb(0,0,255);"/>
    <text font-size="40" x="0" y="15" fill="black">SVG</text>
 </g>
</svg>

的jsfiddle： http://jsfiddle.net/64nkLcdy/

Answer 1

使用clip-path属性：

<svg width="500" height="500">
  <defs>
    <clipPath id="myClip">
      <rect width="80" height="50" />
    </clipPath>
  </defs>
  <g transform="translate(50,50)">
    <rect width="80" height="50" style="fill:rgb(0,0,255);" />
    <text font-size="40" x="0" y="15" fill="black" clip-path="url(#myClip)">SVG</text>
  </g>
</svg>

Answer 2

使用<svg>元素而不是<g>，因为svg元素默认会剪切其内容。溢出属性控制削波，即溢出=＆＃34;可见＆＃34;没有剪辑但溢出=＆＃34;隐藏＆＃34;确实

＆＃13;

＆＃13;

<svg width="500" height="500">
 <svg transform="translate(50,50)" width="80" height="50" overflow="hidden">
    <rect width="80" height="50" style="fill:rgb(0,0,255);"/>
    <text font-size="40" x="0" y="15" fill="black">SVG</text>
 </svg>
</svg>

＆＃13;

＆＃13;

＆＃13;