How to show bottom part of symbol in SVG?

StackOverflow https://stackoverflow.com/questions/23411509

  •  13-07-2023
  •  | 
  •  

Question

I have an SVG symbol defined like this:

<symbol id="MySymbol" >
  <line id="L_010" x1="7" y1="20" x2="23" y2="20" style="stroke:navy; stroke-width:2" />
  <line id="L_020" x1="7" y1="40" x2="23" y2="40" style="stroke:navy; stroke-width:2" />
  <line id="L_030" x1="7" y1="60" x2="23" y2="60" style="stroke:navy; stroke-width:2" />
  <rect id="R_00" x="10" y="0" width="10" height="200" style="fill:#A0B0C0; stroke:navy; stroke-width:1" />
  <line id="L_000" x1="0" y1="1" x2="30" y2="1" style="stroke:navy; stroke-width:2" />
</symbol>

Then I need to repeat this symbol a number of times in a SVG drawing - with < use >, like this:

<use x="400" y="10" width="30" height="200" xlink:href="#MySymbol" />

But - I need to make 1st symbol to shown only bottom part of symbol. Let say - only the last 30% of it. It is possible to do in SVG? Could you please advise?

Actually I need to show 1st symbol - only bottom part (~30% of it), and last symbol - only top part (~30% of it). I know how to show only 30% of last symbol - just need to specify smaller 'height' value for < use >. But still the question - how to show only 30% of bottom part of the symbol?

Thanks.

Was it helpful?

Solution

clip away the bits you don't want to show e.g. to show the bottom half you can do this...

<defs>
    <clipPath id="clip1" clipPathUnits="objectBoundingBox">
        <rect y="0.5" width="1" height="0.5" fill="black" />
    </clipPath>

    <symbol id="MySymbol" >
      <line id="L_010" x1="7" y1="20" x2="23" y2="20" style="stroke:navy; stroke-width:2" />
      <line id="L_020" x1="7" y1="40" x2="23" y2="40" style="stroke:navy; stroke-width:2" />
      <line id="L_030" x1="7" y1="60" x2="23" y2="60" style="stroke:navy; stroke-width:2" />
      <rect id="R_00" x="10" y="0" width="10" height="200" style="fill:#A0B0C0; stroke:navy; stroke-width:1" />
      <line id="L_000" x1="0" y1="1" x2="30" y2="1" style="stroke:navy; stroke-width:2" />
</symbol>

</defs>

<use x="400" y="10" width="30" height="200" xlink:href="#MySymbol" clip-path="url(#clip1)" />
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top