Skip to content

Instantly share code, notes, and snippets.

@basecode

basecode/filter_foreignobject.js

Created August 2, 2012 22:46
Show Gist options
  • Save basecode/3241579 to your computer and use it in GitHub Desktop.
Save basecode/3241579 to your computer and use it in GitHub Desktop.
Download ZIP
SVGFilter + SVGForeignObjectElement
Raw
filter_foreignobject.js
<svg width="500" height="500" style="background-color:orange;" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dropShadowStack">
<feGaussianBlur stdDeviation="3"/>
<feOffset dx="3" dy="3" result="offsetblur"/>
<feFlood flood-color="#720"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="dropShadowPrimitiv">
<feDropShadow stdDeviation="3" dx="3" dy="3" flood-color="#720" flood-opacity="1.0"></feDropShadow>
</filter>
<filter id="aColorMatrix">
<feColorMatrix type="matrix" values="0.48206332325935364 0.4142720401287079 0.10366462916135788 0 0 0.23285624384880066 0.7202568054199219 0.046886883676052094 0 0 0.18925318121910095 0.48131757974624634 0.32942911982536316 0 0 0 0 0 1 0"></feColorMatrix>
</filter>
<filter id="combined1">
<feGaussianBlur stdDeviation="3"/>
<feOffset dx="3" dy="3" result="offsetblur"/>
<feFlood flood-color="#720" result="floodoffsetblur" />
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
<feColorMatrix type="matrix" values="0.48206332325935364 0.4142720401287079 0.10366462916135788 0 0 0.23285624384880066 0.7202568054199219 0.046886883676052094 0 0 0.18925318121910095 0.48131757974624634 0.32942911982536316 0 0 0 0 0 1 0"></feColorMatrix>
</filter>
<filter id="combined2" width="10" height="10" x="-5" y="-5">
<feColorMatrix type="matrix" values="0.48206332325935364 0.4142720401287079 0.10366462916135788 0 0 0.23285624384880066 0.7202568054199219 0.046886883676052094 0 0 0.18925318121910095 0.48131757974624634 0.32942911982536316 0 0 0 0 0 1 0"></feColorMatrix>
<feGaussianBlur stdDeviation="3"/>
<feOffset dx="3" dy="3" result="offsetblur"/>
<feFlood flood-color="#720"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="combined3">
<feColorMatrix type="matrix" values="0.48206332325935364 0.4142720401287079 0.10366462916135788 0 0 0.23285624384880066 0.7202568054199219 0.046886883676052094 0 0 0.18925318121910095 0.48131757974624634 0.32942911982536316 0 0 0 0 0 1 0"></feColorMatrix>
<feDropShadow stdDeviation="2" dx="0" dy="0" flood-color="rgb(0,0,0)" flood-opacity="1.0"></feDropShadow>
</filter>
<filter id="anotherColorMatrix">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 1"></feColorMatrix>
</filter>
</defs>
<g filter="url(#dropShadowStack)">
<rect x="0" y="0" width="100" height="100" style="fill:red;" />
<foreignObject x="0" y="0" width="200" height="200"><body>dropShadowStack</body></foreignObject>
</g>
<g transform="translate(200,0)" filter="url(#dropShadowPrimitiv)">
<rect x="0" y="0" width="100" height="100" style="fill:red;" />
<foreignObject x="0" y="0" width="200" height="200"><body>dropShadowPrimitiv</body></foreignObject>
</g>
<g transform="translate(400,0)" filter="url(#aColorMatrix)">
<rect x="0" y="0" width="100" height="100" style="fill:red;" />
<foreignObject x="0" y="0" width="200" height="200"><body>aColorMatrix</body></foreignObject>
</g>
<g transform="translate(0,200)" filter="url(#combined1)">
<rect x="0" y="0" width="100" height="100" style="fill:red;" />
<foreignObject x="0" y="0" width="200" height="200"><body>combined1</body></foreignObject>
</g>
<g transform="translate(200,200)" filter="url(#combined2)">
<rect x="0" y="0" width="100" height="100" style="fill:red;" />
<foreignObject x="0" y="0" width="200" height="200"><body>combined2</body></foreignObject>
</g>
<g transform="translate(400,200)" filter="url(#combined3)">
<rect x="0" y="0" width="100" height="100" style="fill:red;" />
<foreignObject x="0" y="0" width="200" height="200"><body>combined3</body></foreignObject>
</g>
<g transform="translate(0,400)" filter="url(#anotherColorMatrix)">
<rect x="0" y="0" width="100" height="100" style="fill:red;" />
<foreignObject x="0" y="0" width="150" height="150"><body>anotherColorMatrix</body></foreignObject>
</g>
<g transform="translate(200,400)" filter="url(#anotherColorMatrix)">
<rect x="0" y="0" width="100" height="100" style="fill:red;" />
<text x="0" y="14">anotherColorMatrix</text>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment