Inheriting Attributes in Multiple SVG G Elements

---

Key Constructs

A linear color gradient can be defined with the following SVG snippet:

<defs> <linearGradient     gradientUnits="userSpaceOnUse">    <stop stop-color="yellow" offset="0%"/>    <stop stop-color="black"  offset="100%"/> </linearGradient> </defs>

A radial color gradient can be defined with the following SVG snippet:

<defs> <radialGradient     gradientUnits="userSpaceOnUse">    <stop stop-color="yellow" offset="0%"/>    <stop stop-color="black"  offset="100%"/> </radialGradient> </defs>

A marker can be defined with the following SVG snippet:

<defs>  <marker     refX="0" refY="4"    markerUnits="strokeWidth"    markerWidth="20" markerHeight="8"    fill="url(#gradientDefinition)"    orient="auto">    <path d="M0,0 l20,4 l-20,4 z"/>  </marker> <?defs>

A dotted line can be defined with the following SVG snippet:

<svg width="100%" height="100%">   <defs>     <line            x1="0"   y1="0"           x2="200" y2="0"           stroke="blue" stroke-width="4"/>   </defs> <g>   <use xlink:href="#lineDefinition1"        x="50" y="50"        stroke-dasharray="4 4"/> </g>

An internal stylesheet can be defined with the following SVG snippet:

<style type="text/css"> <![CDATA[

• rect {

    stroke-width:4;   stroke:blue;   fill:red; } ]]> </style>

An external stylesheet can be specified with the following SVG snippet:

<?xml-stylesheet type="text/css" href="externalStyle2.css" ?>

---