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.
Related
So i have page 1 and page 2 which are animated, inside of page 2 there is also animation but problem is that this object shows when page 2 is "hidden". How to prevent that ??
Black square should only be visible when page 2 is visible, but it ignores parent style.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<rect x="0.5" y="0.167" fill="#ccc" stroke="#000" width="100" height="100"/>
<!-- square -->
<g>
<!-- page 1 -->
<g id="page_one" style="z-index:1">
<rect x="25" y="5" width="50" height="50" fill="red" style=""></rect>
</g>
<!-- page 2 -->
<g id="page_two" style="z-index:-1">
<rect x="25" y="5" width="50" height="50" fill="white" style=""></rect>
<g transform="scale(2.9) translate(6,0)">
<g transform="scale(0.205)translate(1,1)">
<!-- animation inside page 2 -->
<g style="z-index:-1">
<animate attributeName="visibility" dur="2" repeatCount="indefinite" keyTimes="0;0.5;1" values="visible;hidden;visible"></animate>
<rect x="25" y="15" width="50" height="50" fill="black" style=""></rect>
</g>
</g>
</g>
</g>
<!-- animate page 1 & 2 -->
<animate xlink:href="#page_one" attributeName="visibility" values="visible;hidden" dur="4s" begin="0s" repeatCount="indefinite"></animate>
<animate xlink:href="#page_two" attributeName="visibility" values="hidden;visible" dur="4s" begin="0s" repeatCount="indefinite"></animate>
</g>
</svg>
Tried some css styling, z-index but nothing solved issue.
animate the display property instead.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<rect x="0.5" y="0.167" fill="#ccc" stroke="#000" width="100" height="100"/>
<!-- square -->
<g>
<!-- page 1 -->
<g id="page_one" style="z-index:1">
<rect x="25" y="5" width="50" height="50" fill="red" style=""></rect>
</g>
<!-- page 2 -->
<g id="page_two" style="z-index:-1">
<rect x="25" y="5" width="50" height="50" fill="white" style=""></rect>
<g transform="scale(2.9) translate(6,0)">
<g transform="scale(0.205)translate(1,1)">
<!-- animation inside page 2 -->
<g style="z-index:-1">
<animate attributeName="display" dur="2" repeatCount="indefinite" keyTimes="0;0.5;1" values="block;none;block"></animate>
<rect x="25" y="15" width="50" height="50" fill="black" style=""></rect>
</g>
</g>
</g>
</g>
<!-- animate page 1 & 2 -->
<animate xlink:href="#page_one" attributeName="display" values="block;none" dur="4s" begin="0s" repeatCount="indefinite"></animate>
<animate xlink:href="#page_two" attributeName="display" values="none;block" dur="4s" begin="0s" repeatCount="indefinite"></animate>
</g>
</svg>
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?
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?