Beispiel:SVG-script-4.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<style>
svg {
height: 410px;
border: thin solid;
--bgcolor: #e6f2f7;
--blue: #337799;
--yellow: #dfac20;
--green: #8db243;
--accent: #c82f04;
}
#text {
font-size: 24px;
font-weight: bold;
text-anchor: middle;
}
ellipse {
fill-opacity: .5;
stroke: black;
stroke-width: .5;
cursor: pointer;
}
#createButton {
fill: #5a9900;
fill-opacity: .5;
stroke: black;
stroke-width: 1;
cursor: pointer;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Get the Object by ID
var mySVG = document.getElementById('svgObject'),
svgDoc;
// Get the SVG document inside the Object tag - Wait until it's loaded!
mySVG.addEventListener('load',function() {
svgDoc = mySVG.contentDocument;
alert('SVG contentDocument is geladen!');
// Get one of the SVG items by ID;
}, false);
function changeFill () {
var svgItem = svgDoc.getElementById('quadrat');
svgItem.setAttribute('fill', '#5a9900');
}
document.querySelector('#button').addEventListener('click', changeFill);
});
</script>
<title>SVG und JavaScript 4</title>
</head>
<body>
<h1>SVG und JavaScript - <br>auf externe SVGs zugreifen</h1>
<object id="svgObject" data="//wiki.selfhtml.org/images/8/8b/Beispiel.svg" type="image/svg+xml" height="250" width="600">
SVG-Grafik konnte nicht geladen werden!
</object>
<br>
<button id="button">Klick mich!</button>
</body>
</html>
