Geek Answers Handbook

SVG path repetition

Say that I have the following arrow, which I want to repeat several times in different places in svg:

<svg width="400" height="400">
<path transform="translate(150,100)" fill="black" d="M 0.5,0.5 l-100,0 -25,20 25,20 100,0 z" />
<path transform="translate(300,200)" fill="black" d="M 0.5,0.5 l-100,0 -25,20 25,20 100,0 z" />
<path transform="translate(150,300)" fill="black" d="M 0.5,0.5 l-100,0 -25,20 25,20 100,0 z" />
</svg>

arrows

Perhaps I would like to change the shape of the path in the future, so I would prefer to avoid copying the attribute insertion deverywhere.

Can I somewhere determine the shape of the path, and then place it in a different location x, ynot manipulating them from javascript?

Two thoughts:

Is there a way to avoid copying an entire object without delivering it from javascript?

+4
source share
2 answers

JCD, OP, <symbol> . <symbol> , , .

<svg width="400" height="400">
  <defs>
    <path id="mypath" fill="black" d="M 0,20 l25,20 100,0 0,-40 -100,0 z" />
  </defs>
  <use xlink:href="#mypath" x="50" y="100" />
  <use xlink:href="#mypath" x="200" y="200" />
  <use xlink:href="#mypath" x="50" y="300" />
</svg>
+4

<defs> <path>, " ", " " . <defs> , SVG. <symbol> <use>.

<symbol> , .

<use> .

<svg width="400" height="400">
  <defs>
    <symbol id="mypath">
      <path fill="black" d="M 0,20 l25,20 100,0 0,-40 -100,0 z" />
    </symbol>
  </defs>
  <use xlink:href="#mypath" x="50" y="100" />
  <use xlink:href="#mypath" x="200" y="200" />
  <use xlink:href="#mypath" x="50" y="300" />
</svg>

<path> , , , transform. , ( ), transform, .

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol

+6

More articles:


All Articles