Beispiel:SVG-Filter-06.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>SVG-Urfilter: feDiffuseLighting</title>
<style>
svg {
width: 96%;
height: 60vh;
padding:0;
}
circle {
fill: skyblue;
}
rect {
fill: gold;
}
#dreieck path {
fill: #c32e04;
}
form {
display:grid;
grid-template-columns: repeat(3, 18em);
gap: 1em;
}
legend {
font-weight: bold;
}
label {
min-width: 4em;
display: inline-block;
text-align: right;
}
label:after {
content:': ';}
[for="lim"]{
display:block;
text-align: left;
}
</style>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#control').addEventListener('input', changeOffset);
changeOffset();
});
function changeOffset() {
var filterElement = document.querySelector('feDistantLight');
let inputAzi = document.querySelector('#azi').value;
filterElement.setAttribute('azimuth', inputAzi);
let inputEl = document.querySelector('#el').value;
filterElement.setAttribute('elevation', inputEl);
var filterElement2 = document.querySelector('fePointLight');
let inputX = document.querySelector('#x').value;
filterElement2.setAttribute('x', inputX);
let inputY = document.querySelector('#y').value;
filterElement2.setAttribute('y', inputY);
let inputZ = document.querySelector('#z').value;
filterElement2.setAttribute('z', inputZ);
var filterElement3 = document.querySelector('feSpotLight');
let inputSpotX = document.querySelector('#x2').value;
filterElement3.setAttribute('x', inputSpotX);
let inputSpotY = document.querySelector('#y2').value;
filterElement3.setAttribute('y', inputSpotY);
let inputSpotZ = document.querySelector('#z2').value;
filterElement3.setAttribute('z', inputSpotZ);
let inputlim = document.querySelector('#lim').value;
filterElement3.setAttribute('limitingConeAngle', inputlim);
let inputPoX = document.querySelector('#pointsAtX').value;
filterElement3.setAttribute('pointsAtX', inputPoX);
let inputPoY = document.querySelector('#pointsAtY').value;
filterElement3.setAttribute('pointsAtY', inputPoY);
let inputPoZ = document.querySelector('#pointsAtZ').value;
filterElement3.setAttribute('pointsAtX', inputPoZ);
return false;
};
</script>
</head>
<body>
<h1>SVG-Urfilter: feDiffuseLighting</h1>
<svg viewBox="0 0 350 400" >
<defs>
<filter id="beleuchtung1">
<feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
<feDistantLight azimuth="50" elevation="50"/>
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="light"
operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
</filter>
<filter id="beleuchtung2">
<feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
<fePointLight x="10" y="10" z="30" />
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="light" operator="arithmetic"
k1="1" k2="0" k3="0" k4="0" />
</filter>
<filter id="beleuchtung3">
<feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
<feSpotLight x="0" y="0" z="50" limitingConeAngle="30" pointsAtX="50" pointsAtY="50"
pointsAtZ="0" />
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="light" operator="arithmetic"
k1="1" k2="0" k3="0" k4="0" />
</filter>
<symbol id="kreis">
<circle cx="50" cy="50" r="50" ></circle>
</symbol>
<symbol id="viereck">
<rect x="0" y="0" width="100" height="100" />
</symbol>
<symbol id="dreieck">
<path d="M0,0 h100 l-50,85z" />
</symbol>
</defs>
<!-- weiche Beleuchtung -->
<text x="10" y="22">feDistantLight</text>
<use xlink:href="#kreis"
transform="translate(10,50)"
filter="url(#beleuchtung1)"
/>
<use xlink:href="#viereck"
transform="translate(10,170)"
filter="url(#beleuchtung1)"
/>
<use xlink:href="#dreieck"
transform="translate(10,290)"
filter="url(#beleuchtung1)"
/>
<!-- Punktlichtquelle -->
<text x="130" y="22">fePointLight</text>
<use xlink:href="#kreis"
transform="translate(120,50)"
filter="url(#beleuchtung2)"
/>
<use xlink:href="#viereck"
transform="translate(120,170)"
filter="url(#beleuchtung2)"
/>
<use xlink:href="#dreieck"
transform="translate(120,290)"
filter="url(#beleuchtung2)"
/>
<!-- Scheinwerfer -->
<text x="230" y="22">feSpotLight</text>
<use xlink:href="#kreis"
transform="translate(230,50)"
filter="url(#beleuchtung3)"
/>
<use xlink:href="#viereck"
transform="translate(230,170)"
filter="url(#beleuchtung3)"
/>
<use xlink:href="#dreieck"
transform="translate(230,290)"
filter="url(#beleuchtung3)"
/>
</svg>
<form id="control">
<fieldset>
<legend>feDistantlight</legend>
<label for="azi">azimuth</label>
<input id="azi" type="range" min="0" max="99" value="50"/>
<label for="el">elevation</label>
<input id="el" type="range" min="0" max="99" value="50"/>
</fieldset>
<fieldset>
<legend>fePointLight</legend>
<label for="x">x</label>
<input id="x" type="range" min="0" max="99" value="10"/>
<label for="y">y</label>
<input id="y" type="range" min="0" max="99" value="10"/>
<label for="z">z</label>
<input id="z" type="range" min="0" max="199" value="20"/>
</fieldset>
<fieldset>
<legend>feSpotLight</legend>
<label for="x2">x</label>
<input id="x2" type="range" min="0" max="99" value="10"/>
<label for="y2">y</label>
<input id="y2" type="range" min="0" max="99" value="10"/>
<label for="z2">z</label>
<input id="z2" type="range" min="0" max="99" value="50"/>
<label for="PointsAtX">PointsAtX</label>
<input id="pointsAtX" type="range" min="0" max="100" value="100"/>
<label for="PointsAtY">PointsAtY</label>
<input id="pointsAtY" type="range" min="0" max="100" value="100"/>
<label for="PointsAtZ">PointsAtZ</label>
<input id="pointsAtZ" type="range" min="0" max="100" value="100"/>
<label for="lim">limitingConeAngle</label>
<input id="lim" type="range" min="0" max="100" value="70"/>
</fieldset>
</form>
<p>Der Beleuchtungseffekt wird umso deutlicher, je heller das zu beleuchtende Objekt ist. Bei der Füllfarbe schwarz ist gar kein Beleuchtungseffekt zu erkennen.<br>
<b>Ändern</b> Sie die Farbe der Grundformen auf weiß, gelb und pink und vergleichen Sie!</p>
</body>
</html>
