flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 18:30:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

added a correct way to use svg filters but it does not work from file: in Chrome...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2018-11-10 04:41:11 +03:00
parent 50dbb406ea
commit 62546edf36
4 changed files with 32 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui (gen4)/css/experimenting.css
View File

@ -155,8 +155,9 @@ body {
filter: contrast(0.8) brightness(0.6) contrast(1.2); filter: contrast(0.8) brightness(0.6) contrast(1.2);
} }
.image-edge-detect { .image-edge-detect {
-webkit-filter: url(#EdgeDetect);
filter: url(#EdgeDetect); filter: url(#EdgeDetect);
/* XXX this does not work in chrome + local file... */
/*filter: url(filters.svg#EdgeDetect);*/
} }

9
ui (gen4)/css/filters.svg Executable file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0%" height="0%" class="svg-filters">
<!-- edge detect -->
<filter id="EdgeDetect">
<feConvolveMatrix order="3 3" preserveAlpha="true" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1"/>
</filter>
</svg>
<!-- vim:set sw=4 ts=4 : -->
Side by Side

After

Width:  |  Height:  |  Size: 300 B

12
ui (gen4)/electron.html
View File

@ -93,16 +93,18 @@ requirejs('ui')
<body> <body>
<div class="svg-filters"> <!--
XXX this lives in css/filters.svg but Chrome refuses to reference
it's internals from the file: protocol...
-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0%" height="0%" class="svg-filters">
<!-- edge detect --> <!-- edge detect -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0%" height="0%">
<filter id="EdgeDetect"> <filter id="EdgeDetect">
<feConvolveMatrix order="3 3" preserveAlpha="true" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1"/> <feConvolveMatrix order="3 3" preserveAlpha="true" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1"/>
</filter> </filter>
</svg>
</div> </svg>
<!-- for viewer structure doc see: ribbons.js... --> <!-- for viewer structure doc see: ribbons.js... -->

12
ui (gen4)/index.html
View File

@ -100,16 +100,20 @@ requirejs(['ui'])
</head> </head>
<body> <body>
<div class="svg-filters"> <!--
XXX this lives in css/filters.svg but Chrome refuses to reference
it's internals from the file: protocol...
-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0%" height="0%" class="svg-filters">
<!-- edge detect --> <!-- edge detect -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0%" height="0%">
<filter id="EdgeDetect"> <filter id="EdgeDetect">
<feConvolveMatrix order="3 3" preserveAlpha="true" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1"/> <feConvolveMatrix order="3 3" preserveAlpha="true" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1"/>
</filter> </filter>
</svg> </svg>
</div>
<!-- for viewer structure doc see: ribbons.js... --> <!-- for viewer structure doc see: ribbons.js... -->