Search code examples
javascripthtmlcsssvg-filters

OKZoom plugin is not working on image with svg filters

OKZoom plugin is working fine on plain "image" tag with "src" attribute. But it is not working on "image" tag with svg filters applied. Can any one help to overcome this issue.In the jsfiddle link I have given both the examples.JSFiddle

HTML

<body>
    <h1>Working</h1>
    <image src="http://www.cpplcounseling.com/uploads/4/6/8/2/46828361/2181364_orig.jpg" class="img-responsive" width="50%" name="ipsDF14-2-29Feb16-9d80-1a94a2e8c121" style="-webkit-filter: brightness(100%) contrast(100%) invert(0%) saturate(100%);">
    <h1>Not Working[Without removing svg fiters how to make the below work?]</h1>
    <svg style="overflow: hidden; height: 637px; width: 546px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
        <defs>
            <filter id="svgBlur" width="110%" height="110%">
                <feComponentTransfer id="bFilter">
                    <feFuncR id="brightness1" class="brgt" type="linear" slope="1"></feFuncR>
                    <feFuncG id="brightness2" class="brgt" type="linear" slope="1"></feFuncG>
                    <feFuncB id="brightness3" class="brgt" type="linear" slope="1"></feFuncB>
                </feComponentTransfer>
                <feComponentTransfer id="cFilter">
                    <feFuncR id="contrast1" class="cnst" type="linear" slope="1" intercept="-0.01"></feFuncR>
                    <feFuncG id="contrast2" class="cnst" type="linear" slope="1" intercept="-0.01"></feFuncG>
                    <feFuncB id="contrast3" class="cnst" type="linear" slope="1" intercept="-0.01"></feFuncB>
                </feComponentTransfer>
                <feComponentTransfer id="gFilter">
                    <feFuncR id="gamma1" class="gama" type="gamma" amplitude="1" exponent="1" offset="0"></feFuncR>
                    <feFuncG id="gamma2" class="gama" type="gamma" amplitude="1" exponent="1" offset="0"></feFuncG>
                    <feFuncB id="gamma3" class="gama" type="gamma" amplitude="1" exponent="1" offset="0"></feFuncB>
                </feComponentTransfer>
                <feColorMatrix id="saturation" type="saturate" values="1"></feColorMatrix>
            </filter>
            <style type="text/css">
                .svg-pan-zoom-control {
                    cursor: pointer;
                    fill: black;
                    fill-opacity: 0.333;
                }
                .svg-pan-zoom-control: hover {
                    fill-opacity: 0.8;
                }
                .svg-pan-zoom-control-background {
                    fill: white;
                    fill-opacity: 0.5;
                }
                .svg-pan-zoom-control-background {
                    fill-opacity: 0.8;
                }
            </style>
        </defs>
            <image  width="50%"  src="http://www.cpplcounseling.com/uploads/4/6/8/2/46828361/2181364_orig.jpg" xlink:href="http://www.cpplcounseling.com/uploads/4/6/8/2/46828361/2181364_orig.jpg" class="img-responsive" width="90%" id="imageStyling" style="height: 630px; width: 536px;" filter="url(#svgBlur)" name="ipsDF14-2-29Feb16-9d80-1a94a2e8c121"></image>

JS

$(document).ready(function() {

                $("img").okzoom({
                    width: 150,
                    height: 150,
                    scaleWidth: 2000,
                    border: "2px solid #fff",
                    shadow: "0 0 5px #fff",
                    cursor:"pointer"
                }); 
                            $("image").okzoom({
                    width: 150,
                    height: 150,
                    scaleWidth: 2000,
                    border: "2px solid #fff",
                    shadow: "0 0 5px #fff",
                    cursor:"pointer"
                }); 

});

JSFiddle

Solution

  • On a brief reading of the OkZoom plugin, it looks like it shouldn't work on an SVG image at all. The plugin takes an img element underneath the pointer, increases its size and loads it into a new overflow-hidden circular element with a higher z-index. SVG has no z-index, its image element is the "image" tag (not the img tag), and I'm guessing the plugin also needs to switch namespaces. There are loupe effects you can create directly in SVG filters using displacementMaps - google them.

    (btw, I think the image tag only works in HTML as an IE backward compatibility thing. It shouldn't really work - and has nothing to do with the SVG image element.)