I animate on hover the opacity of a masked SVG to put a semi transparent layer over an image. It works all fine except with Firefox, where the mask is not showing and the image goes all white. The mask is applied to the image through CSS
<svg id="svg-fade" class="visible-sm-block img-circle" width="200" height="200">
<defs>
<mask id="mask2" width="200" height="200" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect x="0" y="0" width="200" height="200" style="stroke:none; fill: #bbbbbb"></rect>
<rect x="95" y="50" width="10" height="100" style="stroke:none; fill: #000000"></rect>
<rect x="50" y="95" width="100" height="10" style="stroke:none; fill: #000000"></rect>
</mask>
</defs>
<rect class="target" width="200" height="200" style="stroke:none; fill: rgba(255,255,255,1)"></rect>
</svg>
The live code can be viewed here.
Is there an attribute missing or why is the mask not showing up in Firefox?
Your help is much appreciated!
For any future reference: I found that the id of the mask has to be unique throughout the whole document even when the mask is defined in the very same SVG and you can't use a class instead either.
Related
I'm building a painting tool with SVG that has various actions such as painting rectangles and rotating. One of the actions is to add a mask, effectively windowing the content to a specific area. To accomplish this, I'm using the svg mask element. However, when also adding a rotation, it seems that the mask is not working and the elements are rendering weirdly.
This is an example SVG:
`
<svg width="50%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-250 -300 500 600">
<defs>
<mask id="57656">
<rect fill="black" x="-250" y="-300" width="500" height="600"></rect>
<rect fill="white" x="-72" y="-141" width="235" height="287"></rect>
</mask>
</defs>
<g transform="rotate(20)">
<g mask="url(#57656)">
<rect x="0" y="202" width="271" height="118" fill="rgb(128,237,51)" opacity="0.21"></rect>
<rect x="3" y="167" width="313" height="318" fill="rgb(152,28,5)" opacity="0.58"></rect>
<rect x="-65" y="-40" width="317" height="222" fill="rgb(74,103,68)" opacity="0.29"></rect>
</g>
</g>
</svg>
`
how it should look (on firefox and safari)
how it looks on chrome
how it looks on chrome without rotation
What could be causing this? is it a bug? I've also tried style="transform: rotateZ(20)" but that has the same issue.
Apparently, this issue is also related to transparency rendering.
Replacing opacity with fill-opacity applid to masked elements fixed this bug for me.
svg {
width: 20em;
border: 1px solid #ccc
}
<svg width="50%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-250 -300 500 600">
<defs>
<mask id="m57656">
<rect fill="black" x="-250" y="-300" width="500" height="600"></rect>
<rect fill="white" x="-72" y="-141" width="235" height="287"></rect>
</mask>
</defs>
<g transform="rotate(20)">
<g mask="url(#m57656)">
<rect x="0" y="202" width="271" height="118" fill="rgb(128,237,51)" fill-opacity="0.21"></rect>
<rect x="3" y="167" width="313" height="318" fill="rgb(152,28,5)" fill-opacity="0.58"></rect>
<rect x="-65" y="-40" width="317" height="222" fill="rgb(74,103,68)" fill-opacity="0.29"></rect>
</g>
</g>
</svg>
The goal is to show image but with another color inside svg.
I tried -webkit-mask-image with background-color, but this combination does not work in svg. Here is the example:
<div class="dashboard-buttons">
<svg width="367" height="243.5" viewBox="252.5 60.5 367 243.5">
<g>
<rect width="46" height="46" rx="4" ry="4" transform="translate(-23, -23)" style="fill:white" x="560" y="224"></rect>
<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#element3" href="#element3" onclick="window.location.href = '#element3';">
<image height="32" width="32" transform="translate(-16, -16)" x="560" y="224" style="background-color: Red; -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAACqSURBVFhH7ZYhDsJAFESHBMkBOCYGyQV6BQ6BQ0EwWByiuwj0Fk5AgO00+XJpCd20gpnkqfZnXrJmoCiVx+rmcWyD/2zCGXM7yZvK4c2S2InDiRIzO8uXZNkHgsM2HjC10zxJFXWwjsDEzvsnUfANVz7JpS93j+JXgSyEEs9RBRokIAEJSEACEpDA+AIcpa/UhyHg2n6A02jJabSjyH5Qms4SC1uGyt8GqAEZtGBDEZcerAAAAABJRU5ErkJggg==');width: 32px; height: 32px;"></image>
</a>
<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#element3"><text filter="url(#fillbackground)" x="560" y="257">out</text></a>
</g>
</svg>
</div>
If you remove svg tags from it then this sample works and the color changed.
Do you know how to change image color inside svg correctly?
EDIT:
The following code works in Chrome, but not in Firefox:
<div class="wrapper">
<svg width="200" height="300" class="svg">
<defs>
<mask id="mask">
<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAACqSURBVFhH7ZYhDsJAFESHBMkBOCYGyQV6BQ6BQ0EwWByiuwj0Fk5AgO00+XJpCd20gpnkqfZnXrJmoCiVx+rmcWyD/2zCGXM7yZvK4c2S2InDiRIzO8uXZNkHgsM2HjC10zxJFXWwjsDEzvsnUfANVz7JpS93j+JXgSyEEs9RBRokIAEJSEACEpDA+AIcpa/UhyHg2n6A02jJabSjyH5Qms4SC1uGyt8GqAEZtGBDEZcerAAAAABJRU5ErkJggg==">
</image>
</mask>
</defs>
<rect width="50" height="50" style="fill:blue;" x="0" y="0"
mask="url(#mask)"></rect>
</svg>
</div>
Can't see your example, but:
<rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
fill-opacity="0.5" stroke-opacity="0.8"/>
Use the fill option!
EDIT:
Now I can see your code.
If you insert an image as PNG:
data:image/png
Then I doubt you can change the color with HTML directive. PNG are bitmaps and not SVG, you would have to edit the PNG itself to achieve that.
I'm trying to fill SVG image with a pattern in HTML, but I'm not successfull. If I fill with the pattern path, it works. But I cannot apply it onto svg image.
Could you help me please?
Here is example.
Here is example code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="400" height="400">
<defs>
<pattern id="image" x="0" y="0" width="400" height="400" patternUnits="userSpaceOnUse">
<image x="0" y="0" xlink:href="latka.jpg" width="100" height="100" />
</pattern>
</defs>
<image x="0" y="0" width="400" height="400" xlink:href="kosile.svg" fill="url(#image)"/>
</svg>
It makes no sense to apply a fill attribute to an embedded SVG. I assume what you were trying to do is create a tiled background on which to superimpose the linked SVG. The easiest way to do this is by adding a <rect> element filled with the background pattern, then put your embedded SVG image on top of this.
Here's an example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200" viewBox="0 0 200 200">
<defs>
<!-- define a pattern using a yellow tile image -->
<pattern id="bgimg" x="0" y="0" width="60" height="60"
patternUnits="userSpaceOnUse">
<image x="0" y="0" width="60" height="60"
xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Shades_of_yellow.png/60px-Shades_of_yellow.png" />
</pattern>
</defs>
<!-- use this pattern to fill the SVG background -->
<rect x="0" y="0" width="200" height="200" fill="url(#bgimg)" />
<!-- Embed another SVG (purple circle) on top of this background -->
<image x="40" y="40" width="120" height="120"
xlink:href="http://upload.wikimedia.org/wikipedia/commons/5/5e/FF0084_circle.svg" />
</svg>
My goal is to cut out a rectangular area of a photo using an svg mask in html5. I have attempted to implement this using the code below and in this fiddle, to no avail. Can anyone tell me what I'm doing wrong?
html:
<body>
<svg id="svg-rect" width="50px" height="50px">
<defs>
<mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect width="100%" height="100%" />
</mask>
</defs>
</svg>
<!--<svg id="svg-rect" width="50px" height="50px">
<rect width="100%" height="100%" />
</svg>-->
<img src="https://scontent-a.xx.fbcdn.net/hphotos-prn1/t1.0-9/p235x165/75938_10152243783285987_398136218_n.jpg"/>
</body>
css:
img {
mask: url(#masking);
position:absolute;
top:0px;
left:0px;
}
#svg-rect{
position:absolute;
top:50px;
left:60px;
z-index:2;
}
Applying SVG effects to HTML only works in Firefox. You have to use -webkit-mask in Chrome/Safari and that's been deprecated. Next, you have to fill your rectangle with a color for the mask to take effect. And there is a bug in firefox, where you have to specify the x/y offset for a rect in a mask in decimal form, %'s won't work. Change your rect definition to:
<rect x=".2" y=".2" width=".25" height=".25" fill="white" />
And you'll see a mask effect (in Firefox only)
or... to invert the mask, use an empty fill and a solid stroke
<rect x="0" y="0" width="1" height="1" stroke="white" stroke-width=".4" />
The best way to do this for maximum compatibility, however, is to use inline SVG all the way, and just do your image content in SVG using the SVG image tag.
Elaborating on Michaels' last point, here's how you would do it in a pure SVG way.
<svg width="235" height="314" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="masking">
<rect width="100%" height="100%" fill="white" />
<rect x="60px" y="50px" width="50px" height="50px" fill="black" />
</mask>
</defs>
<image width="235" height="314"
mask="url(#masking)"
xlink:href="https://scontent-a.xx.fbcdn.net/hphotos-prn1/t1.0-9/p235x165/75938_10152243783285987_398136218_n.jpg" />
</svg>
Fiddle here
This is the code i have so far but it's not good
<svg
width="200"
height="13">
<g
id="layer1">
<text
style="font-size:13px;font-family:Arial;"
x="0"
y="13"
id="">THIS IS A TEST</text>
</g>
</svg>
i am trying to get the text to fit perfectly in the box and etc. also need to add a background color to it.
This can serve:
<svg
baseProfile="full"
width="200"
height="13">
<g id="layer1">
<rect width="100%" height="100%" fill="red" />
<text
style="font-size:13px;font-family:Arial;"
x="0"
y="13"
id="">THIS IS A TEST</text>