SVG click event Designs 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SVG click event Designs</title>
	<meta name="Description" content="geovindu"/>
<meta name="Keywords" content="geovindu"/>
<meta name="author" content="geovindu"/>
	
  <script src="ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
	 <script src="bootstrap/4.6.2/js/bootstrap.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="bootstrap/4.6.2/css/bootstrap.min.css">
	  <script  src="js/jquery-3.6.0.js"></script>
	 <script  type="text/javascript" src="assets/js/DuSize.js"></script>
  <link rel="stylesheet" href="css/main.css">
			<style>
	
  *{
    margin:0 auto;
	padding: 0
  }
			
.container{
    width: 100%;
    position: relative;
    overflow: hidden;	  
	  
  }	
  .container > svg{
    width: 33.333%;
	height: 100%;/*56.5%*/
    float: left;
	 position: relative; 
    /*position: absolute;*/
    border: 0px solid #ccc;
    margin-bottom: 0px;
  }
  .container > svg:after {
    content: '\20';
    padding-top:99.99%;
    display: block;
  }		
	
	  .container > object{
    width: 33.333%;
	height: 100%;/*56.5%*/
    float: left;
	 position: relative; 
    /*position: absolute;*/
    border: 0px solid #ccc;
    margin-bottom: 0px;
  }
  .container > object:after {
    content: '\20';
    padding-top:99.99%;
    display: block;
  }	
  img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }



/* enabled svg click event */
svg {
  pointer-events: all;
	cursor:pointer;
}

      

</style>
</head>

<body>	
<div class="container">		
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="15" y="15" width="40" height="40" fill="red">
<set attributeName="fill" to="blue" begin="click"/>
</rect>
</svg>	
	
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" a3:scriptImplementation="Adobe">
<script type="text/ecmascript" a3:scriptImplementation="Adobe">
<![CDATA[	
document.addEventListener('click', changeColor);	
function changeColor(evt)
{
var rect = evt.target;
rect.setAttributeNS(null, "fill", "blue")
}
]]></script>
<rect x="5" y="5" width="40" height="40"
fill="red"
οnclick= "changeColor(evt)"/> u
</svg>	
<svg onclick="makeShape(evt)" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="text/ecmascript">
<![CDATA[
//document.getElementById("Layer_1").dispatchEvent(new Event('click'));	
	
var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt) {
svgDoc = evt.target.ownerDocument;
var rect = svgDoc.createElementNS(svgns, "rect");
rect.setAttributeNS(null, "x", "5");
rect.setAttributeNS(null, "y", "5");
rect.setAttributeNS(null, "width", "40");
rect.setAttributeNS(null, "height", "40");
rect.setAttributeNS(null, "fill", "red");
var set = svgDoc.createElementNS(svgns, "set");
set.setAttributeNS(null, "attributeName", "fill");
set.setAttributeNS(null, "to", "blue");
set.setAttributeNS(null, "begin", "click");
rect.appendChild(set);
svgDoc.rootElement.appendChild(rect);
}
]]></script>
<rect x="5" y="5" width="40" height="40"
fill="red" οnclick="makeShape(evt)"></rect>
</svg>
	</div>
	
<div class="container">
	<svg  xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820' οnlοad="makeShape(evt)">
<script type="text/ecmascript"><![CDATA[
		//https://css-tricks.com/links-inline-svg-staying-target-events/
	//document.getElementById("targetElm").dispatchEvent(new Event('click'));	
		
var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt) {
if (window.svgDocument == null )
svgDoc = evt.target.ownerDocument;
var rect = svgDoc.createElementNS(svgns, "rect");
rect.setAttributeNS(null, "x", 15);
rect.setAttributeNS(null, "y", 15);
rect.setAttributeNS(null, "width", 40);
rect.setAttributeNS(null, "height", 40);
rect.setAttributeNS(null, "fill", "red");
rect.addEventListener("click", changeColor, false); 
svgDoc.documentElement.appendChild(rect);
}
		
function changeColor(evt)
{
var target = evt.target;
target.setAttributeNS(null, "fill", "blue");
}
		
]]></script>
		<rect id="targetElm" x="5" y="5" width="40" height="40"
fill="red"  onclick="makeShape(evt)"></rect>
</svg>
	
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'>

  <script type="text/ecmascript"><![CDATA[
		  //https://www.smashingmagazine.com/2018/05/svg-interaction-pointer-events-property/
      function changerect(evt) {
        var svgobj=evt.target;
        svgobj.style.opacity= 0.3;
        svgobj.setAttribute ('x', 300);
      }
    ]]>
  </script>

  <rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'height='100' />
</svg>
	</div>
</body>
</html>

　　

posted @ 2023-01-08 19:59  ®Geovin Du Dream Park™  阅读(36)  评论(0)    收藏  举报