CODEWITHSUNDEEP
svg
CuriousSuperhero
CuriousSuperhero

Reputation: 6671

Cut off half of the SVG's text element

How can I make this

enter image description here

to look like this

enter image description here

So I want to halve the text element. I don't want to hide half of the text outside of SVG. Hiding it outside of g would be ok, but haven't found solution.

<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/

Upvotes: 0

Views: 2546

Answers (2)

Robert Longson
Robert Longson

Reputation: 124014

Use an <svg> element rather than a <g> as the svg element will clip its contents by default. The overflow property controls clipping i.e overflow="visible" doesn't clip but overflow="hidden" does.

<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>

Upvotes: 1

Kaiido
Kaiido

Reputation: 136678

Use the clip-path property : 

<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>

Upvotes: 2

Related Questions