PureBuster: Hotspot in SVG

Beitrag lesen

SELF-Forum

Hotspot in SVG

PureBuster
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich möchte in einem iframe eine svg anzeigen und auf der Seite selbst eine Legende zu verschiedenen Elementen der SVG aufbauen. Eigentlich hatte ich mir das nicht kompliziert vorgestellt, nur klappen will es nicht...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>Freude schöner Götterfunken</title>  
</head>  
  <body>  
    <h1>Freude schöner Götterfunken</h1>  
     <div id="svg">  
		<iframe src="svg.svg" name="iframe_svg" width="600" height="500">  
			<p>Ihr Browser unterstützt iframe nicht!</p>  
		</iframe>  
     </div>  
     <br/>  
	 <div>  
		<p id="Abbildung_1_legende"><a href="#svg">Europa Frame</a>  
		</p>  
		<p id="Abbildung_1_legende"><a href="./svg.svg" target="iframe_svg">Europa SVG</a>  
		</p>  
		<p id="Abbildung_1_legende_1"><a href="./svg.svg#ziel)" target="iframe_svg">Stern 1</a>  
		</p>  
	 </div>  
   </body>  
</html>

     <svg xmlns="http://www.w3.org/2000/svg"  
          xmlns:xlink="http://www.w3.org/1999/xlink"  
          version="1.1" width="810" height="540">  
       <title>Sterne als Götterfunken</title>  
       <defs>  
             <g id="s">  
                   <g id="c">  
                     <path id="t" d="M0,0v1h0.5z" transform="translate(0,-1)rotate(18)"/>  
                         <use xlink:href="#t" transform="scale(-1,1)"/>  
                    </g>  
                        <g id="a">  
                          <use xlink:href="#c" transform="rotate(72)"/>  
                          <use xlink:href="#c" transform="rotate(144)"/>  
                        </g>  
                        <use xlink:href="#a" transform="scale(-1,1)"/>  
                  </g>  
        </defs>  
         <rect fill="#039" width="810" height="540"/>  
                 <g fill="#fc0" transform="scale(30)translate(13.5,9)">  
                 <use xlink:href="#s" y="-6"/>  
                 <use xlink:href="#s" y="6"/>  
                 <g id="l">  
                   <use xlink:href="#s" x="-6"/>  
                   <use xlink:href="#s" transform="rotate(150)translate(0,6)rotate(66)"/>  
                   <use xlink:href="#s" transform="rotate(120)translate(0,6)rotate(24)"/>  
                   <use xlink:href="#s" transform="rotate(60)translate(0,6)rotate(12)"/>  
                   <use xlink:href="#s" transform="rotate(30)translate(0,6)rotate(42)"/>  
                 </g>  
                 <use xlink:href="#l" transform="scale(-1,1)"/>  
                </g>  
		<rect id="ziel" fill="#099" width="20" height="20" transform="translate(500,400)"/>  
		  
     </svg>

Kann mir wer auf die Beine helfen?

Beitrag melden
–
Informationen zu den Bewertungsregeln