blob: c6c2aac2e80ebf2b244e745881ff5f4475be22d2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<svg id="svg-root" width="100%" height="100%"
viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" shape-rendering="crispEdges">
<defs>
<filter id="composite-ident" x="0" y="0" width="1" height="1">
<feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="0" k2="1" k3="-1" k4="0"/>
</filter>
<filter id="composite-negative" x="0" y="0" width="1" height="1">
<feComposite operator="arithmetic" in="FillPaint" in2="FillPaint" k1="0" k2="2" k3="-1.5" k4="0"/>
</filter>
<filter id="composite-mixed" x="0" y="0" width="1" height="1">
<feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="1" k2="-0.5" k3="0.2" k4="-0.1"/>
</filter>
<filter id="composite-clamped" x="0" y="0" width="1" height="1">
<feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="0" k2="10" k3="20" k4="0"/>
</filter>
</defs>
<g transform="translate(100 30)">
<rect fill="lime" width="120" height="120"/>
<rect fill="red" stroke="red" filter="url(#composite-ident)" x="10" y="10" width="100" height="100"/>
</g>
<g transform="translate(250 30)">
<rect fill="#0F0" filter="url(#composite-negative)" x="10" y="10" width="100" height="100"/>
<rect stroke="#80FF80" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/>
</g>
<g transform="translate(100 180)">
<rect fill="rgb(43,17,12)" stroke="rgb(32,42,37)" filter="url(#composite-mixed)" x="10" y="10" width="100" height="100"/>
<rect stroke="#666" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/>
</g>
<g transform="translate(250 180)">
<rect fill="rgb(0,127,0)" stroke="rgb(0,0,127)" filter="url(#composite-clamped)" x="10" y="10" width="100" height="100"/>
<rect stroke="rgb(0,255,255)" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/>
</g>
</svg>
|
