I'm having a strange issue where images in an svg aren't rendering, however, I can see the image perfectly fine in the console. The issue is reproducible in jsfiddle
https://jsfiddle.net/f1rgy645/
I removed the actual dataUri from the example below to not spam the page.
<svg id="svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="9in" height="3.9375in" viewBox="0 0 9 3.9375">
<!--Tally -->
<!--Quote -->
<!--Line ID -->
<!--Background white-->
<!--User -->
<g transform="rotate(0 4.5 1.96875)" clip-path="url(#clip)">
<!--Background: white.png-->
<svg preserveAspectRatio="none" x="0" y="0" width="9" height="100%" viewBox="0 0 1000 750">
<image xlink:href="data:image/png;base64, " x="0" y="0" width="100%" height="100%" transform="rotate(0 375 500)"/>
</svg>
<!--Background: Halloween_Skeleton.png-->
<svg preserveAspectRatio="none" x="0" y="0" width="9" height="100%" viewBox="0 0 4526 2727">
<image xlink:href="data:image/png;base64," x="0" y="0" width="100%" height="100%" transform="rotate(0 1363.5 2263)"/>
</svg>
</g>
<defs>
<clipPath id="clip">
<use xlink:href="#shape"/>
</clipPath>
<style type="text/css">
</style>
</defs>
</svg>
Looks like the DataURI is correct, so what is going on?
Related
My pattern is in Firefox not visible:
Top: Chrome
Bottom: Firefox
Svg Code (but please down a bit to see the image)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 120 120" version="1.1" viewBox="0 0 120 120" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{opacity:0.48;}
.st2{fill:#FFF99A;}
.st5{fill:url(#a);stroke:#007BFF;stroke-width:0.5;stroke-miterlimit:10;}
</style>
<pattern id="b" y="120" width="200" height="200" overflow="visible" patternUnits="userSpaceOnUse" viewBox="0 -200 200 200">
<rect class="st0" y="-200" width="200" height="200"/>
<rect class="st0" y="-200" width="200" height="200"/>
<g class="st1">
<rect class="st2" y="-100" width="200" height="100"/>
</g>
<g class="st1">
<rect class="st2" x="100" y="-200" width="100" height="200"/>
</g>
</pattern>
<pattern id="a" xlink:href="#b" patternTransform="matrix(.014142 -.014142 -.014142 -.014142 -16028 -559.29)">
</pattern>
<path class="st5" d="m87.5 87.5v23.1c0 3.5-2.6 6.4-6.1 6.8-21.7 2.6-42.3 0-50.3-1.2-2.1-0.3-3.6-2.1-3.6-4.2 0-5.6 0.1-16.7 0.5-24.4h23.5"/>
</svg>
Any idea why?
I found this question, but it really didn't change anything.
I've removed the pattern #aand now it works in FF too
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 120 120" version="1.1" viewBox="0 70 120 65" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{opacity:0.48;}
.st2{fill:#FFF99A;}
.st5{fill:url(#b);stroke:#007BFF;stroke-width:0.5;stroke-miterlimit:10;}
</style>
<pattern id="b" y="120" width="200" height="200" overflow="visible" patternUnits="userSpaceOnUse" viewBox="0 0 200 200" patternTransform="matrix(.014142 -.014142 -.014142 -.014142 -16028 -559.29)">
<rect class="st0" width="200" height="200"/>
<rect class="st0" width="200" height="200"/>
<g class="st1">
<rect class="st2" y="100" width="200" height="100"/>
</g>
<g class="st1">
<rect class="st2" x="100" width="100" height="200"/>
</g>
</pattern>
<path class="st5" d="m87.5 87.5v23.1c0 3.5-2.6 6.4-6.1 6.8-21.7 2.6-42.3 0-50.3-1.2-2.1-0.3-3.6-2.1-3.6-4.2 0-5.6 0.1-16.7 0.5-24.4h23.5"/>
</svg>
It's a bug in Firefox that affects patterns with viewBox x,y values that aren't 0 0.
So to fix this SVG replace the y value from the pattern's viewBox with 0 (viewBox="0 -200 200 200" -> viewBox="0 0 200 200"), and wrap the pattern contents in <g transform="translate(0, 200)"> which offsets the viewBox change.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 120 120" version="1.1" viewBox="0 0 120 120" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{opacity:0.48;}
.st2{fill:#FFF99A;}
.st5{fill:url(#a);stroke:#007BFF;stroke-width:0.5;stroke-miterlimit:10;}
</style>
<!-- remove negative -200 from viewBox -->
<pattern id="b" y="120" width="200" height="200" overflow="visible" patternUnits="userSpaceOnUse" viewBox="0 0 200 200">
<!-- wrap pattern contents with a group, offsetting the y value removed from viewBox -->
<g transform="translate(0, 200)">
<rect class="st0" y="-200" width="200" height="200"/>
<rect class="st0" y="-200" width="200" height="200"/>
<g class="st1">
<rect class="st2" y="-100" width="200" height="100"/>
</g>
<g class="st1">
<rect class="st2" x="100" y="-200" width="100" height="200"/>
</g>
</g>
</pattern>
<pattern id="a" xlink:href="#b" patternTransform="matrix(.014142 -.014142 -.014142 -.014142 -16028 -559.29)">
</pattern>
<path class="st5" d="m87.5 87.5v23.1c0 3.5-2.6 6.4-6.1 6.8-21.7 2.6-42.3 0-50.3-1.2-2.1-0.3-3.6-2.1-3.6-4.2 0-5.6 0.1-16.7 0.5-24.4h23.5"/>
</svg>
Looks like it has been reported here https://bugzilla.mozilla.org/show_bug.cgi?id=1193586
In this example, I set up a filter that textures the given element with a checkboard pattern using SVG filter effects:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="texture" x="0" y="0" width="100%" height="100%">
<feImage width="16" height="16" result="checkerboard-image"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEXMzMzLy8v////+/v7l
9thZAAAAO0lEQVR4ASXIUQ3AIBAFsJKcACQxu4/kBCAJFUu2ftbUYeWYI8G51kqU3VSCm68l
hpyH/nuWHaQH2eoF1bMYGK3LF0IAAAAASUVORK5CYII="/>
<feTile in="checkerboard-image" result="texture" />
<feBlend in="SourceGraphic" in2="texture" mode="multiply" />
<feTile/>
</filter>
</defs>
<image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"
x="0" y="0" width="100%" height="100%" style="filter:url(#texture);"/>
</svg>
Is there a way I can rotate the whole texture, so that I get e.g. a 45-degree rotated checkboard pattern applied on the same image?
I figured it out. You need to wrap the image in several nested <g> groups. From the innermost group:
Rotate the image in the negative desired angle
Apply the filter
Rotate the image in the positive desired angle
The image will remain in the original rotation, but the effect will have been applied on the rotated image, thus making the effect itself rotated.
Here's the code itself:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="texture" x="0" y="0" width="100%" height="100%">
<feImage width="16" height="16" result="texture-image"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEXMzMzLy8v////+/v7l
9thZAAAAO0lEQVR4ASXIUQ3AIBAFsJKcACQxu4/kBCAJFUu2ftbUYeWYI8G51kqU3VSCm68l
hpyH/nuWHaQH2eoF1bMYGK3LF0IAAAAASUVORK5CYII="/>
<feTile in="texture-image" result="texture" />
<feBlend in="SourceGraphic" in2="texture" mode="multiply" />
<feTile/>
</filter>
</defs>
<g transform="rotate(30)">
<g filter="url(#texture)" >
<g transform="rotate(-30)">
<image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" x="0" y="0" width="100%" height="100%"/>
</g>
</g>
</g>
</svg>
Theoretically, you could do it with a feDisplacementMap, but generating the right displacement map is quite difficult, so practically speaking, you have to rotate the checkerboard outside the filter (by redoing the checkerboard image, or using a patternTransform). Here is an example that inverts the filter inputs - it pulls in the main image via a feImage, and makes the rotated checkerboard the SourceGraphic.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="checker-pattern" x="0" y="0" width="16" height="16" patternTransform="rotate(45) translate(-4 4)" patternUnits="userSpaceOnUse">
<image x="0" y="0" height="16" width="16" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEXMzMzLy8v////+/v7l9thZAAAAO0lEQVR4ASXIUQ3AIBAFsJKcACQxu4/kBCAJFUu2ftbUYeWYI8G51kqU3VSCm68l
hpyH/nuWHaQH2eoF1bMYGK3LF0IAAAAASUVORK5CYII="/>
</pattern>
<filter id="texture" x="0" y="0" width="100%" height="100%">
<feImage x="0%" y="0%" width="100%" height="100%" result="original-image"
xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"/>
<feBlend in="SourceGraphic" mode="multiply" />
</filter>
</defs>
<g filter="url(#texture)">
<rect x="0%" y="0%" width="100%" height="100%" fill="url(#checker-pattern)"/>
</g>
</svg>
A different solution would be using an SVG pattern, like so:
<svg viewBox='0 0 200 200' width='200' height='200' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<pattern id='_texture' width='16' height='16' patternUnits='userSpaceOnUse' patternTransform="rotate(45)">
<g fill='rgba(0,0,0,.3)'>
<rect width='8' height='8'/>
<rect x='8' y='8' width='8' height='8'/>
</g>
</pattern>
</defs>
<image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"
x="0" y="0" width="100%" height="100%" />
<rect width='100%' height='100%' fill='url(#_texture)'/>
</svg>
UPDATE
this time I'm using an SVG dataURI image instead instead of your dataURI. The filter is still there. I hope it helps.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="texture" x="0" y="0" width="100%" height="100%">
<feImage width="11.31" height="11.31" result="checkerboard-image"
xlink:href="data:image/svg+xml,%3Csvg viewBox='0 0 11.31 11.31' width='11.31' height='11.31' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg fill='rgba(0,0,0,.3)' transform='rotate(45 5.655 5.655)'%3E%3Crect width='8' height='8' x='1.655' y='1.655'/%3E%3C/g%3E%3C/svg%3E"/>
<feTile in="checkerboard-image" result="texture" />
<feBlend in="SourceGraphic" in2="texture" mode="multiply" />
<feTile/>
</filter>
</defs>
<image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"
x="0" y="0" width="100%" height="100%" style="filter:url(#texture);"/>
</svg>
I have a svg element as follows:
<svg height="30px" width="30px" y="-15" x="-20">
<g>
<defs width="30px" height="30px" id="imgdefs">
<pattern y="0" x="0" width="1" height="1" id="circlePattern">
<image xlink:href="https://media.licdn.com/mpr/mprx/0_x0rFQvgE2sZmSRnExdHbC6kwDjB-wsBb1mHW_hHEeypPwELF9mHbS9rE7RI-wRWRpRkd3-0oksR1HOq6PuzRmTO63sRtHYTb9uzX58IIoUaOGesRsj_ELqLVTf3CTY9nxflIGYQ1lZ5" width="30px" height="30px" y="0" x="0">
</image>
</pattern>
</defs><circle fill="url(#circlePattern)" cy="15" cx="15" r="15px">
</circle>
</g>
</svg>
It shows up in Chrome but does not show up in Firefox 40, nor IE 11. Anyone know what the problem might be?
i need help with this SVG code below that is beeing cut off in Firefox only. Chrome, IE work fine.
I tried several solutions already with no luck.
This SVG was exported from illustrator.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 13.4 30.3" style="enable-background:new 0 0 13.4 30.3;" xml:space="preserve">
<style type="text/css">
.st0{clip-path:url(#SVGID_3_);}
.st1{clip-path:url(#SVGID_4_);fill:#76BE5A;}
.st2{clip-path:url(#SVGID_6_);fill:none;stroke:#76BE5A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
<g>
<defs>
<rect id="SVGID_1_" x="-0.6" y="0.3" width="14" height="30"/>
</defs>
<defs>
<path id="SVGID_2_" d="M4.6,2c0.2-1.1,1.2-1.9,2.2-1.7c1,0.2,1.7,1.2,1.5,2.3L8.1,3.8C8,4.9,7,5.6,6,5.5c-1-0.2-1.7-1.2-1.5-2.3
L4.6,2"/>
</defs>
<clipPath id="SVGID_3_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<clipPath id="SVGID_4_" class="st0">
<use xlink:href="#SVGID_2_" style="overflow:visible;"/>
</clipPath>
<rect x="-0.6" y="-4.8" class="st1" width="14" height="15.3"/>
</g>
<g>
<defs>
<rect id="SVGID_5_" x="-0.6" y="0.3" width="14" height="30"/>
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_5_" style="overflow:visible;"/>
</clipPath>
<path class="st2" d="M12.4,17.5c-0.1-0.1-1.8-4.4-1.8-4.4L8.7,7.5L3.3,8.4l-0.5,4.7l-1.6,5.2 M5.1,16.6l1.8,12.7 M12.4,29.3
l-2.9-5.9l-0.8-5.9l-3.7-0.9"/>
</g>
</g>
</svg>
Thank you
I have a gradient overlaying a solid color (red) specified as a pattern:
<svg width="480" height="480">
<defs>
<pattern width="1" height="1" x="0" y="0" id="pattern">
<rect width="240" height="240" x="0" y="0" fill="rgba(255,0,0,1)"/>
<rect width="240" height="240" x="0" y="0" fill="url(#gradient)"/>
</pattern>
<linearGradient id="gradient" x1="0" y1="1" x2="0" y2="0">
<stop offset="0%" stop-color="rgb(0,0,0)" stop-opacity="1"/>
<stop offset="100%" stop-color="rgb(0,0,0)" stop-opacity="0"/>
</linearGradient>
</defs>
<path
transform="matrix(1,0,0,1,200,200)"
d="M0 0M 120 0 A 120 120 0 0 0 -120 0 A 120 120 0 0 0 120 0"
fill="url(#pattern)"
/>
</svg>
Left: Firefox. Right: Chrome
The one on the right (Chrome) is correct.
Does anyone know how to make this work in Firefox?
See it live: http://jsbin.com/eyenoh/edit#html,live
I was able to get it working by using the object bounding box as coordinate system for the pattern content.
<pattern width="1" height="1" x="0" y="0" id="pattern" patternContentUnits="objectBoundingBox">
<rect width="1" height="1" x="0" y="0" fill="rgba(255,0,0,1)"/>
<rect width="1" height="1" x="0" y="0" fill="url(#gradient)"/>
</pattern>
See it here:
http://jsbin.com/efesev/edit#html,live
I'll try to investigate further. Looks like a good candidate for a bug report.