<!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>
标签：Designs,container,SVG,100%,event,width,position,click From： https://www.cnblogs.com/geovindu/p/17035228.html