ZVON > References > Zvon Example Repository
Intro / Search / ZVON
Example repository: index | categories | search

All > SVG > Interactive > interact-pEvents-BE-06


File: interact-pEvents-BE-06
Author: Jon Ferraiolo
Origin: W3C SVG conformance suite

Rendered imageSVG source
ElementsAttributes
axlink:href |
defs
descid |
ellipsecx | cy | onmouseout | onmouseover | rx | ry | style |
gid | style | transform |
pathd | id | style |
rectheight | id | onmouseout | onmouseover | style | width | x | y |
scripttype |
svgheight | id | width |
textstyle | x | y |
titleid |


Source

<svg id="svg-root" width="450" height="450" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
     <title id="test-title">interact-pEvents-BE-06</title>
     <desc id="test-desc"> Test property 'pointer-events'. </desc>
     <g id="test-body-content">
          <defs>
               <script type="text/ecmascript">
		
		function bubbleYes(evt, idname, color){
		  // Get Document
      var target = evt.target;
      var doc = target.ownerDocument;
      var diamondElement = doc.getElementById(idname);
		  diamondElement.setAttribute('style', 'fill:'+color);
		}
		function bubbleNo(evt, idname, color){
		  // Get Document
      var target = evt.target;
      var doc = target.ownerDocument;
      var diamondElement = doc.getElementById(idname);
		  diamondElement.setAttribute('style', 'fill:'+color);
      evt.stopPropagation();
      evt.preventDefault();
		}
</script>
          </defs>
          <text style="font-family:Helvetica;font-size:16;text-anchor:middle;" x="225" y="20"> Test property 'pointer-events'. </text>
          <g style="text-anchor:middle;font-family:Helvetica;font-size:12;stroke-width:8;">
               <g transform="translate(0,30)">
                    <g transform="translate(20,0)" style="fill:#ffff00;stroke:black;">
                         <rect x="-10" width="50" height="30" style="pointer-events:all;fill:green;stroke:none;" onmouseover="bubbleNo(evt, 'R1_C1', 'blue')" onmouseout="bubbleNo(evt, 'R1_C1', 'none')"/>
                         <ellipse cx="15" cy="15" rx="18" ry="8" style="pointer-events:painted;fill:inherit;stroke:inherit;" onmouseover="bubbleNo(evt, 'R1_C1', 'red')" onmouseout="bubbleNo(evt, 'R1_C1', 'none')"/>
                         <text x="25" y="40" style="fill:black;stroke:none;">painted</text>
                         <text x="25" y="50" style="fill:black;stroke:none;">(fill and stroke)</text>
                         <text x="25" y="60" style="fill:red;stroke:none;">[inside or perim]</text>
                         <g style="stroke:black;stroke-width:2;">
                              <path id="R1_C1" d="M 45,15 L 55,5 L 65,15 L 55,25 z" style="fill:none;"/>
                         </g>
                    </g>
                    <g transform="translate(110,0)" style="fill:#ffff00;stroke:none;">
                         <rect x="-10" width="50" height="30" style="pointer-events:all;fill:green;stroke:none;" onmouseover="bubbleNo(evt, 'R1_C2', 'blue')" onmouseout="bubbleNo(evt, 'R1_C2', 'none')"/>
                         <ellipse cx="15" cy="15" rx="18" ry="8" style="pointer-events:painted;fill:inherit;stroke:inherit;" onmouseover="bubbleNo(evt, 'R1_C2', 'red')" onmouseout="bubbleNo(evt, 'R1_C2', 'none')"/>
                         <text x="25" y="40" style="fill:black;stroke:none;">painted</text>
                         <text x="25" y="50" style="fill:black;stroke:none;">(fill only)</text>
                         <text x="25" y="60" style="fill:red;stroke:none;">[inside only]</text>
                         <g style="stroke:black;stroke-width:2;">
                              <path id="R1_C2" d="M 45,15 L 55,5 L 65,15 L 55,25 z" style="fill:none;"/>
                         </g>
                    </g>
                    <g transform="translate(200,0)" style="fill:none;stroke:black;">
                         <rect x="-10" width="50" height="30" style="pointer-events:all;fill:green;stroke:none;" onmouseover="bubbleNo(evt, 'R1_C3', 'blue')" onmouseout="bubbleNo(evt, 'R1_C3', 'none')"/>
                         <ellipse cx="15" cy="15" rx="18" ry="8" style="pointer-events:painted;fill:inherit;stroke:inherit;" onmouseover="bubbleNo(evt, 'R1_C3', 'red')" onmouseout="bubbleNo(evt, 'R1_C3', 'none')"/>
                         <text x="25" y="40" style="fill:black;stroke:none;">painted</text>
                         <text x="25" y="50" style="fill:black;stroke:none;">(stroke only)</text>
                         <text x="25" y="60" style="fill:red;stroke:none;">[perim only]</text>
                         <g style="stroke:black;stroke-width:2;">
                              <path id="R1_C3" d="M 45,15 L 55,5 L 65,15 L 55,25 z" style="fill:none;"/>
                         </g>
                    </g>
                    <g transform="translate(290,0)" style="fill:none;stroke:none;">
                         <rect x="-10" width="50" height="30" style="pointer-events:all;fill:green;stroke:none;" onmouseover="bubbleNo(evt, 'R1_C4', 'blue')" onmouseout="bubbleNo(evt, 'R1_C4', 'none')"/>
                         <ellipse cx="15" cy="15" rx="18" ry="8" style="pointer-events:painted;fill:inherit;stroke:inherit;" onmouseover="bubbleNo(evt, 'R1_C4', 'red')" onmouseout="bubbleNo(evt, 'R1_C4', 'none')"/>
                         <text x="25" y="40" style="fill:black;stroke:none;">painted</text>
                         <text x="25" y="50" style="fill:black;stroke:none;">(no fill/stroke)</text>
                         <text x="25" y="60" style="fill:red;stroke:none;">[never]</text>
                         <g style="stroke:black;stroke-width:2;">
                              <path id="R1_C4" d="M 45,15 L 55,5 L 65,15 L 55,25 z" style="fill:none;"/>
                         </g>
                    </g>
                    <g transform="translate(380,0)" style="fill:#ffff00;stroke:black;">
                         <rect x="-10" width="50" height="30" style="pointer-events:all;fill:green;stroke:none;" onmouseover="bubbleNo(evt, 'R1_C5', 'blue')" onmouseout="bubbleNo(evt, 'R1_C5', 'none')"/>
                         <ellipse cx="15" cy="15" rx="18" ry="8" style="pointer-events:painted;fill:inherit;stroke:inherit;visibility:hidden;" onmouseover="bubbleNo(evt, 'R1_C5', 'red')" onmouseout="bubbleNo(evt, 'R1_C5', 'none')"/>
                         <text x="25" y="40" style="fill:black;stroke:none;">painted</text>
                         <text x="25" y="50" style="fill:black;stroke:none;">(f/s/hidden)</text>
                         <text x="25" y="60" style="fill:red;stroke:none;">[inside or perim]</text>
                         <g style="stroke:black;stroke-width:2;">
                              <path id="R1_C5" d="M 45,15 L 55,5 L 65,15 L 55,25 z" style="fill:none;"/>
                         </g>
                    </g>
               </g>
               <g transform="translate(0,100)">
                    <g transform="translate(20,0)" style="fill:#ffff00;stroke:black;">
                         <rect x="-10" width="50" height="30" style="pointer-events:all;fill:green;stroke:none;" onmouseover="bubbleNo(evt, 'R2_C1', 'blue')" onmouseout="bubbleNo(evt, 'R2_C1', 'none')"/>
                         <ellipse cx="15" cy="15" rx="18" ry="8" style="pointer-events:fill;fill:inherit;stroke:inherit;" onmouseover="bubbleNo(evt, 'R2_C1', 'red')" onmouseout="bubbleNo(evt, 'R2_C1', 'none')"/>
                         <text x="25" y="40" style="fill:black;stroke:none;">fill</text>
                         <text x="25" y="50" style="fill:black;stroke:none;">(fill and stroke)</text>
                         <text x="25" y="60" style="fill:red;stroke:none;">[inside only]</text>
                         <g style="stroke:black;stroke-width:2;">
                              <path id="R2_C1" d="M 45,15 L 55,5 L 65,15 L 55,25 z" style="fill:none;"/>
                         </g>
                    </g>
                    <g transform="translate(110,0)" style="fill:#ffff00;stroke:none;">
                         <rect x="-10" width="50" height="30" style="pointer-events:all;fill:green;stroke:none;" onmouseover="bubbleNo(evt, 'R2_C2', 'blue')" onmouseout="bubbleNo(evt, 'R2_C2', 'none')"/>
                         <ellipse cx="15" cy="15" rx="18" ry="8" style="pointer-events:fill;fill:inherit;stroke:inherit;" onmouseover="bubbleNo(evt, 'R2_C2', 'red')" onmouseout="bubbleNo(evt, 'R2_C2', 'none')"/>
                         <text x="25" y="40" style="fill:black;stroke:none;">fill</text>
                         <text x="25" y="50" style="fill:black;stroke:none;">(fill only)</text>
                         <text x="25" y="60" style="fill:red;stroke:none;">[inside only]</text>
                         <g style="stroke:black;stroke-width:2;">
                              <path id="R2_C2" d="M 45,15 L 55,5 L 65,15 L 55,25 z" style="fill:none;"/>
                         </g>
                    </g>
                    <g transform="translate(200,0)" style="fill:none;stroke:black;">
                         <rect x="-10" width="50" height="30" style="pointer-events:all;fill:green;stroke:none;" onmouseover="bubbleNo(evt, 'R2_C3', 'blue')" onmouseout="bubbleNo(evt, 'R2_C3', 'none')"/>
                         <ellipse cx="15" cy="15" rx="18" ry="8" style="pointer-events:fill;fill:inherit;stroke:inherit;" onmouseover="bubbleNo(evt, 'R2_C3', 'red')" onmouseout="bubbleNo(evt, 'R2_C3', 'none')"/>
                         <text x="25" y="40" style="fill:black;stroke:none;">fill</text>
                         <text x="25" y="50" style="fill:black;stroke:none;">(stroke only)</text>
                         <text x="25" y="60" style="fill:red;stroke:none;">[inside only]</text>
                         <g style="stroke:black;stroke-width:2;">
                              <path id="R2_C3" d="M 45,15 L 55,5 L 65,15 L 55,25 z" style="fill:none;"/>
                         </g>
                    </g>
                    <g transform="translate(290,0)" style="fill:none;stroke:none;">
                         <rect x="-10" width="50" height="30" style="pointer-events:all;fill:green;stroke:none;" onmouseover="bubbleNo(evt, 'R2_C4', 'blue')" onmouseout="bubbleNo(evt, 'R2_C4', 'none')"/>
                         <ellipse cx="15" cy="15" rx="18" ry="8" style="pointer-events:fill;fill:inherit;stroke:inherit;" onmouseover="bubbleNo(evt, 'R2_C4', 'red')" onmouseout="bubbleNo(evt, 'R2_C4', 'none')"/>
                         <text x="25" y="40" style="fill:black;stroke:none;">fill</text>
                         <text x="25" y="50" style="fill:black;stroke:none;">(no fill/stroke)</text>
                         <text x="25" y="60" style="fill:red;stroke:none;">[inside only]</text>
                         <g style="stroke:black;stroke-width:2;">
                              <path id="R2_C4" d="M 45,15 L 55,5 L 65,15 L 55,25 z" style="fill:none;"/>
                         </g>
                    </g>
                    <g transform="translate(380,0)" style="fill:#ffff00;stroke:black;">
                         <rect x="-10" width="50" height="30" style="pointer-events:all;fill:green;stroke:none;" onmouseover="bubbleNo(evt, 'R2_C5', 'blue')" onmouseout="bubbleNo(evt, 'R2_C5', 'none')"/>
                         <ellipse cx="15" cy="15" rx="18" ry="8" style="pointer-events:fill;fill:inherit;stroke:inherit;visibility:hidden;" onmouseover="bubbleNo(evt, 'R2_C5', 'red')" onmouseout="bubbleNo(evt, 'R2_C5', 'none')"/>
                         <text x="25" y="40" style="fill:black;stroke:none;">fill</text>
                         <text x="25" y="50" style="fill:black;stroke:none;">(f/s/hidden)</text>
                         <text x="25" y="60" style="fill:red;stroke:none;">[inside only]</text>
                         <g style="stroke:black;stroke-width:2;">
                              <path id="R2_C5" d="M 45,15 L 55,5 L 65,15 L 55,25 z" style="fill:none;"/>
                         </g>
                    </g>
               </g>
               <g transform="translate(0,170)">
                    <g transform="translate(20,0)" style="fill:#ffff00;stroke:black;">
                         <rect x="-10" width="50" height="30" style="pointer-events:all;fill:green;stroke:none;" onmouseover="bubbleNo(evt, 'R3_C1', 'blue')" onmouseout="bubbleNo(evt, 'R3_C1', 'none')"/>
                         <ellipse cx="15" cy="15" rx="18" ry="8" style="pointer-events:stroke;fill:inherit;stroke:inherit;" onmouseover="bubbleNo(evt, 'R3_C1', 'red')" onmouseout="bubbleNo(evt, 'R3_C1', 'none')"/>
                         <text x="25" y="40" style="fill:black;stroke:none;">stroke</text>
                         <text x="25" y="50" style="fill:black;stroke:none;">(fill and stroke)</text>
                         <text x="25" y="60" style="fill:red;stroke:none;">[perim only]</text>
                         <g style="stroke:black;stroke-width:2;">
                              <path id="R3_C1" d="M 45,15 L 55,5 L 65,15 L 55,25 z" style="fill:none;"/>
                         </g>
                    </g>
                    <g transform="translate(110,0)" style="fill:#ffff00;stroke:none;">
                         <rect x="-10" width="50" height="30" style="pointer-events:all;fill:green;stroke:none;" onmouseover="bubbleNo(evt, 'R3_C2', 'blue')" onmouseout="bubbleNo(evt, 'R3_C2', 'none')"/>
                         <ellipse cx="15" cy="15" rx="18" ry="8" style="pointer-events:stroke;fill:inherit;stroke:inherit;" onmouseover="bubbleNo(evt, 'R3_C2', 'red')" onmouseout="bubbleNo(evt, 'R3_C2', 'none')"/>
                         <text x="25" y="40" style="fill:black;stroke:none;">stroke</text>
                         <text x="25" y="50" style="fill:black;stroke:none;">(fill only)</text>
                         <text x="25" y="60" style="fill:red;stroke:none;">[perim only]</text>
                         <g style="stroke:black;stroke-width:2;">
                              <path id="R3_C2" d="M 45,15 L 55,5 L 65,15 L 55,25 z" style="fill:none;"/>
                         </g>
                    </g>
                    <g transform="translate(200,0)" style="fill:none;stroke:black;">
                         <