Verwendung von Klassen und ID´s

Wenn Sie Klassen oder ID´s verwenden, entweder zur Festlegung von Styles, oder um innerhalb des SVG´s

auf andere Teile des SVG´s zu verlinken, können Probleme auftreten, wenn ein SVG Steuerelement mehrere

Male im Projekt verwendet wird.


Das Problem entsteht dadurch, dass der SVG-Inhalt bei Verwendung mehrerer Steuerelemente auch mehrfach im

Browser/Viewer geladen wird, und es so zu mehrfacher Definition ein und derselben Klasse bzw. ID kommt.


Um dies zu verhindern, können Sie Klassen und ID Namen mit dem Präfix „_elementid_“ versehen.

Dieser Präfix wird zur Laufzeit automatisch durch die eindeutige ID eines jeden Steuerelementes ersetzt.

Dadurch ergeben sich für jedes einzelne Steuerelement eindeutige Klassen und ID Namen.

Hier einmal ein Ausschnitt einer Syntax als Beispiel:


<g>
        <defs>
    <radialGradient id="_elementid_c1" cx="0.5" cy="0.5" r="0.5">
        <stop offset="0" stop-color="#F7F7F7"></stop>
        <stop offset=".5" stop-color="#C0C0C0"></stop>
        <stop offset="1" stop-color="#898989"></stop>
    </radialGradient>
     <linearGradient id="_elementid_c2" x1="0" y1="0.5" x2="1.2" y2="0.6">
        <stop offset="0" stop-color="#F7F7F7"></stop>
        <stop offset=".5" stop-color="#C0C0C0"></stop>
        <stop offset="1" stop-color="#898989"></stop>
    </linearGradient>
    <linearGradient id="_elementid_c3" x1="0" y1="0.5" x2="1.2" y2="0.6">
        <stop offset="0" stop-color="#FF0000"></stop>
        <stop offset=".3" stop-color="#F2F2F2"></stop>
        <stop offset=".4" stop-color="#FFFFFF"></stop>
    </linearGradient>
</defs>