Inheriting Attributes in Multiple SVG G Elements : g element « SVG « XML

1. XML
2. SVG
3. g element

Inheriting Attributes in Multiple SVG G Elements

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="linearGradientDefinition1"
      gradientUnits="objectBoundingBox">
      <stop offset="0%" stop-color="#FF0000" />
      <stop offset="100%" stop-color="#000000" />
    </linearGradient>

    <linearGradient id="linearGradientDefinition2"
      gradientUnits="objectBoundingBox">
      <stop offset="0%" stop-color="#FFFF00" />
      <stop offset="100%" stop-color="#000000" />
    </linearGradient>
  </defs>

  <g>
    <g fill="url(#linearGradientDefinition1)">
      <rect x="100" y="50" stroke="red" stroke-width="3"
        stroke-dasharray="4 4 4 4" width="200" height="100" />

    </g>

    <g fill="url(#linearGradientDefinition2)">
      <rect x="100" y="250" stroke="blue" stroke-width="3"
        stroke-dasharray="4 4 4 4" width="200" height="100" />


    </g>
  </g>
</svg>

 

Related examples in the same category