Beispiel:SVG-Filter-14.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: feSpecularLighting</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: feSpecularLighting</h1>
<svg viewBox="0 0 350 400" >
<defs>
<filter id="specularPoint">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
<feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" specularExponent="10" lighting-color="white" result="specOut">
<fePointLight x="-50" y="-100" z="200" /> </feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="out2" />
<feMerge>
<feMergeNode in="out2" />
</feMerge>
</filter>
<filter id="specularDistant">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
<feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" specularExponent="10" lighting-color="white" result="specOut">
<feDistantLight azimuth="100" elevation="50" /> </feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="out2" />
<feMerge>
<feMergeNode in="out2" />
</feMerge>
</filter>
<filter id="specularSpot">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
<feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" specularExponent="10" lighting-color="white" result="specOut">
<feSpotLight x="-20" y="5" z="30" limitingConeAngle="45" pointsAtX="10" pointsAtY="10" pointsAtZ="0" /> </feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="out2" />
<feMerge>
<feMergeNode in="out2" /> </feMerge>
</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 href="#kreis"
transform="translate(10,50)"
filter="url(#specularDistant)"
/>
<use href="#viereck"
transform="translate(10,170)"
filter="url(#specularDistant)"
/>
<use href="#dreieck"
transform="translate(10,290)"
filter="url(#specularDistant)"
/>
<!-- Punktlichtquelle -->
<text x="130" y="22">fePointLight</text>
<use href="#kreis"
transform="translate(120,50)"
filter="url(#specularPoint)"
/>
<use href="#viereck"
transform="translate(120,170)"
filter="url(#specularPoint)"
/>
<use href="#dreieck"
transform="translate(120,290)"
filter="url(#specularPoint)"
/>
<!-- Scheinwerfer -->
<text x="230" y="22">feSpotLight</text>
<use href="#kreis" transform="translate(230,50)" filter="url(#specularSpot)" />
<use href="#viereck" transform="translate(230,170)" filter="url(#specularSpot)" />
<use href="#dreieck" transform="translate(230,290)" filter="url(#specularSpot)" />
</svg>
<form id="control">
<fieldset>
<legend>feDistantlight</legend>
<label for="azi">azimuth</label>
<input id="azi" type="range" min="-100" max="99" value="45"/>
<label for="el">elevation</label>
<input id="el" type="range" min="0" max="99" value="45"/>
</fieldset>
<fieldset>
<legend>fePointLight</legend>
<label for="x">x</label>
<input id="x" type="range" min="-100" max="99" value="-50"/>
<label for="y">y</label>
<input id="y" type="range" min="-100" max="99" value="-100"/>
<label for="z">z</label>
<input id="z" type="range" min="-100" max="199" value="199"/>
</fieldset>
<fieldset>
<legend>feSpotLight</legend>
<label for="x2">x</label>
<input id="x2" type="range" min="0" max="99" value="-50"/>
<label for="y2">y</label>
<input id="y2" type="range" min="0" max="99" value="-100"/>
<label for="z2">z</label>
<input id="z2" type="range" min="0" max="99" value="200"/>
<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="20"/>
</fieldset>
</form>
</body>
</html>
