SVG: Define once on page, use in multiple

Question

I want to be able to define a mask once with <defs> on a page then reuse it within multiple <svg> elements.

For example:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xlink="http://www.w3.org/1999/xlink">
<defs>
  <clipPath id="SvgjsClipPath1009">
    <rect width="200%" height="80%" x="0" y="20%"></rect>
    <rect width="200%" height="80%" x="0" y="20%"></rect>
  </clipPath>
</defs>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xlink="http://www.w3.org/1999/xlink">
<g clip-path="url(#SvgjsClipPath1009)">
<image class="Chevron-Image" xlink:href="http://placekitten.com/g/1200/1200" width="1200" height="1200" x="50%" y="50%"></image>
</g>
</svg>

Currently this does not work in Chrome. Is there a trick to doing this or do all SVGs have to be self-contained?

Charlie · Accepted Answer

You can inline the SVG with the <defs> and inline the SVG with the references/styles.

<html>
<body>
    <style>svg rect{fill:url(#bg);}</style>
    <svg><defs><linearGradient id="bg"></defs></svg>
    <svg><rect x="0" y="0" width="100" height="100" /></svg>
</body>
</html>

(HTML and SVG trimmed for brevity)

SVG: Define <defs> once on page, use in multiple <svg>?

Tags:

html

svg

shshaw

1 Answers

Charlie

Recent Activity

Donate For Us