How to Use CSS Mask in IE and Mozilla - css

I came across this CSS property for IE and Mozilla
I intend to mask an HTML element but I can't seem to work it. Please I need your help, this is my code
.download {
mask: url(image/download.svg#Capa_1);
-webkit-mask: url("image/download.svg") top left / cover;}
and this is my SVG file
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path d="M256,288l128-128h-96V32h-64v128h-96L256,288z M372.363,235.636l-35.87,35.871L466.533,320L256,398.509L45.467,320
l130.04-48.493l-35.871-35.871L0,288v128l256,96l256-96V288L372.363,235.636z"/>
</svg>


Use SVG for the content and the mask. For example:
<svg>
<defs>
<mask id="mask1" x="0" y="0" width="1000" height="1000" >
<rect x="0" y="0" width="1000" height="1000"
style="stroke:none; fill: #999999"/>
</mask>
</defs>
<rect x="1" y="1" width="100" height="100"
style="stroke: none; fill: #000000; mask: url(#mask1)"/>
</svg>
References
SVG Masks

Related

SVG rect resizing on hover

I'm trying to change the height of rectangles in my svg on hover. I can't for the life of me figure this out and I'd love some help. This is a very simple version of the SVG
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns:bx="https://boxy-svg.com"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 900 350"
style="enable-background:new 0 0 900 350;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FF0000;}
.st1{fill:#FED52A;}
.st2{fill:#00B3E4;}
</style>
<rect id="red" class="st0" width="280" height="350"/>
<rect id="yellow" x="620" class="st1" width="280" height="350"/>
<rect id="blue" x="310" class="st2" width="280" height="350"/>
<rect id="smallred" y="297" class="st0" width="280" height="53"/>
</svg>
I want the size of "red" rectangle to smoothly transition to the size of "small red" on hover and then smoothly transition back when not hovering over it. Ideally I want this all to happen within the SVG. Can anyone help or point me in the right direction?

You can't affect width/height of a rect in an SVG with CSS but you can transform it vertically to the required height.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
#red {
transition: transform 1s ease;
}
#red:hover {
transform: scaleY(calc(53/350));
}
svg {
height: 90vh;
}
<svg version="1.1" id="Layer_1" xmlns:bx="https://boxy-svg.com" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 900 350" style="enable-background:new 0 0 900 350;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FF0000;}
.st1{fill:#FED52A;}
.st2{fill:#00B3E4;}
</style>
<rect id="red" class="st0" width="280" height="350"/>
<rect id="yellow" x="620" class="st1" width="280" height="350"/>
<rect id="blue" x="310" class="st2" width="280" height="350"/>
<rect id="smallred" y="297" class="st0" width="280" height="53"/>
</svg>

svg disappears without rect border

I have the following svg:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg
id="dude"
version="1.1"
baseProfile="basic"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%"
height="100%"
viewBox="0 0 300 300"
preserveAspectRatio="xMidYMid meet"
class="global"
>
<style type="text/css"><![CDATA[
.global {
fill: grey;
}
.dude {
fill: white;
}
]]></style>
<rect x="0" y="0" width="300" height="300" stroke-width="0" />
<g transform="translate(150,375)">
<g class="dude" transform="scale(0.85)">
<circle cx="0" cy="-300" r="90" />
<circle cx="0" cy="-75" r="130" />
</g>
</g>
</svg>
It works fine, but the <rect> is not needed. However when I remove it then the whole svg disappears. I thought maybe its because there is no width and height. But even if I add this via CSS, the svg disappears.
https://jsfiddle.net/L5v9tpsm/
How can I get the circles and background to show, without the <rect>?

Why is my SVG image squeezed in IE11?

I'm using SVG image files with <img> tag. The image looks fine in all browsers except for IE11.
How it should look:
How it looks in IE11:
The CSS is set to width:42px; height:auto. I've tried fiddling with viewbox and height and width of the SVG itself, but nothing seems to help.
This is the code:
.st0{
fill:#7F7F7F;
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" x="0px" y="0px"
viewBox="0 0 40 40" xml:space="preserve">
<g id="_x33_A4Pmf.tif_1_">
<g>
<path class="st0" d="M38,23.3c0,0.3,0,0.6,0,0.9c0,0,0,0.1,0,0.1c0,0.3-0.1,0.6-0.1,1c-0.2,1.5-0.8,2.8-1.7,4
c-1.4,1.8-3.2,2.9-5.3,3.3c-0.7,0.1-1.4,0.2-2.1,0.2c-5.8,0-11.7,0-17.5,0c-0.6,0-1.2,0-1.7-0.1c-1.1-0.2-2.1-0.6-3.1-1.2
c-1.2-0.7-2.2-1.7-3-2.9c-0.7-1.1-1.1-2.3-1.3-3.6c0-0.2,0-0.4-0.1-0.6c0-0.3,0-0.6,0-0.9c0-0.1,0-0.3,0-0.4
c0.1-1,0.3-1.9,0.7-2.8c0.4-1,1-1.8,1.7-2.6C5.2,16.8,6,16.2,7,15.7c0.1,0,0.1-0.1,0.1-0.2c0.5-1.6,1.4-3.1,2.5-4.4
c1-1.1,2.1-2,3.4-2.6c1.4-0.7,2.9-1.1,4.5-1.3c0.1,0,0.3,0,0.4,0c0.4,0,0.7,0,1.1,0c0,0,0.1,0,0.1,0c0.4,0,0.8,0.1,1.1,0.1
C21.6,7.6,23,8,24.2,8.7c2.5,1.4,4.3,3.4,5.4,6c0,0.1,0.1,0.1,0.1,0.1c0.3,0,0.5,0.1,0.8,0.1c1.2,0.2,2.2,0.6,3.2,1.2
c1.2,0.8,2.2,1.7,2.9,2.9c0.7,1.1,1.1,2.3,1.3,3.6C38,22.9,38,23.1,38,23.3z M20,29.8c3,0,6,0,8.9,0c0.4,0,0.7,0,1.1-0.1
c1.3-0.2,2.4-0.8,3.3-1.7c1.3-1.4,1.9-3.1,1.7-5c-0.2-1.3-0.7-2.4-1.6-3.3c-0.9-1-2.1-1.6-3.4-1.8c-0.4-0.1-0.8-0.1-1.2-0.1
c-0.4,0.1-0.8,0.1-1.2,0.1c-0.1,0-0.1,0-0.1-0.1c-0.1-0.4-0.2-0.8-0.4-1.2c-0.6-1.9-1.6-3.4-3.2-4.6c-2-1.5-4.3-2.1-6.8-1.7
c-1.5,0.2-2.9,0.8-4.2,1.8c-1.4,1.1-2.4,2.4-2.9,4c-0.2,0.5-0.3,1.1-0.5,1.6c0,0.1-0.1,0.1-0.1,0.2c-0.3,0.1-0.6,0.2-0.9,0.4
c-0.9,0.4-1.6,1-2.2,1.7C5.4,21.2,5,22.5,5,24c0.1,1.4,0.5,2.6,1.4,3.6c1.2,1.4,2.8,2.1,4.6,2.1C14,29.8,17,29.8,20,29.8z"/>
<path class="st0" d="M17,20.7c-0.9,0-1.7,0-2.6,0c1.4-1.9,2.7-3.7,4.1-5.6c1.4,1.9,2.7,3.7,4.1,5.6c-0.9,0-1.7,0-2.6,0
c0,2,0,4,0,6c-1,0-2,0-3,0C17,24.7,17,22.8,17,20.7z"/>
</g>
</g>
</svg>

I added a red box that shows the area occupied by svg
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 40 40" style="border:1px solid red;" >
Chrome
IE11
If you replace height:auto with a fixed size
svg {
width:42px;
height:42px;
}
The image will look the same in all browsers:
the second variant: add the viewport to the svg file width="40" height="40"
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="40" height="40" viewBox="0 0 40 40" style="border:1px solid red;" >
<style type="text/css">
.st0{fill:#7F7F7F;}
</style>
<g id="_x33_A4Pmf.tif_1_">
<g>
<path class="st0" d="M38,23.3c0,0.3,0,0.6,0,0.9c0,0,0,0.1,0,0.1c0,0.3-0.1,0.6-0.1,1c-0.2,1.5-0.8,2.8-1.7,4
c-1.4,1.8-3.2,2.9-5.3,3.3c-0.7,0.1-1.4,0.2-2.1,0.2c-5.8,0-11.7,0-17.5,0c-0.6,0-1.2,0-1.7-0.1c-1.1-0.2-2.1-0.6-3.1-1.2
c-1.2-0.7-2.2-1.7-3-2.9c-0.7-1.1-1.1-2.3-1.3-3.6c0-0.2,0-0.4-0.1-0.6c0-0.3,0-0.6,0-0.9c0-0.1,0-0.3,0-0.4
c0.1-1,0.3-1.9,0.7-2.8c0.4-1,1-1.8,1.7-2.6C5.2,16.8,6,16.2,7,15.7c0.1,0,0.1-0.1,0.1-0.2c0.5-1.6,1.4-3.1,2.5-4.4
c1-1.1,2.1-2,3.4-2.6c1.4-0.7,2.9-1.1,4.5-1.3c0.1,0,0.3,0,0.4,0c0.4,0,0.7,0,1.1,0c0,0,0.1,0,0.1,0c0.4,0,0.8,0.1,1.1,0.1
C21.6,7.6,23,8,24.2,8.7c2.5,1.4,4.3,3.4,5.4,6c0,0.1,0.1,0.1,0.1,0.1c0.3,0,0.5,0.1,0.8,0.1c1.2,0.2,2.2,0.6,3.2,1.2
c1.2,0.8,2.2,1.7,2.9,2.9c0.7,1.1,1.1,2.3,1.3,3.6C38,22.9,38,23.1,38,23.3z M20,29.8c3,0,6,0,8.9,0c0.4,0,0.7,0,1.1-0.1
c1.3-0.2,2.4-0.8,3.3-1.7c1.3-1.4,1.9-3.1,1.7-5c-0.2-1.3-0.7-2.4-1.6-3.3c-0.9-1-2.1-1.6-3.4-1.8c-0.4-0.1-0.8-0.1-1.2-0.1
c-0.4,0.1-0.8,0.1-1.2,0.1c-0.1,0-0.1,0-0.1-0.1c-0.1-0.4-0.2-0.8-0.4-1.2c-0.6-1.9-1.6-3.4-3.2-4.6c-2-1.5-4.3-2.1-6.8-1.7
c-1.5,0.2-2.9,0.8-4.2,1.8c-1.4,1.1-2.4,2.4-2.9,4c-0.2,0.5-0.3,1.1-0.5,1.6c0,0.1-0.1,0.1-0.1,0.2c-0.3,0.1-0.6,0.2-0.9,0.4
c-0.9,0.4-1.6,1-2.2,1.7C5.4,21.2,5,22.5,5,24c0.1,1.4,0.5,2.6,1.4,3.6c1.2,1.4,2.8,2.1,4.6,2.1C14,29.8,17,29.8,20,29.8z"/>
<path class="st0" d="M17,20.7c-0.9,0-1.7,0-2.6,0c1.4-1.9,2.7-3.7,4.1-5.6c1.4,1.9,2.7,3.7,4.1,5.6c-0.9,0-1.7,0-2.6,0
c0,2,0,4,0,6c-1,0-2,0-3,0C17,24.7,17,22.8,17,20.7z"/>
</g>
</g>
</svg>
The third variant
If you want to leave css rule - height: auto; for the block, then add "preserveAspectRatio"
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 40 40" preserveAspectRatio="xMinYMin meet" >
<style type="text/css">
.st0{fill:#7F7F7F;}
svg {
width:42px;
height:auto;
}

SVG <view> bug in macOS Safari

I'm trying to create an SVG sprite that can be used both as bg and as inline svg via .
The following SVG mostly works:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!-- symbols: used for inline SVGs via <use> -->
<symbol id="tsg-en-logo" viewBox="0 0 100 11.1">
<path fill="#0CA8D0" d="M0,2h1..."/>
</symbol>
<symbol id="chevron-down" viewBox="0 0 200 123.9">
<g fill="#0CA8D0">
<path d="M49..."/>
</g>
</symbol>
<!-- views: used for bg images -->
<view xmlns="http://www.w3.org/2000/svg" id="tsg-en-logo-bg" width="100" height="11.1" viewBox="0 0 100 11.1"/>
<view xmlns="http://www.w3.org/2000/svg" id="chevron-down-bg" width="200" height="123.9" viewBox="0 12 200 123.9"/>
<!-- uses: shown when acceses directly on the browser -->
<use xlink:href="#tsg-en-logo" x="0" y="0" width="100" height="11.1" id="u-tsg-en-logo"></use>
<use xlink:href="#chevron-down" x="0" y="12" width="200" height="123.9" id="u-chevron-down"></use>
</svg>
The problem is that when used as a BG, macOS Safari looses the proportions.
See full SVG here: https://cdn.rawgit.com/42pe/7a3a0193d3a142e7d93601340e6ee8fc/raw/81a7b0598b7179bdc071bba87569d53e2a7651e7/test.svg
And working fiddle: https://jsfiddle.net/42pe/Lragjqef/1/
Any idea why or how to fix? This works fine on Chrome, Firefox, IE11 and Edge!

SVG Path Fill Colour with CSS

I've seen lots of people posting this, and they all seem pretty happy with their answers.
However I cant get my path fill to actually work,
http://jsfiddle.net/OwenMelbz/LvgmV/
The fiddle is above, the svg is generated from Illustrator
HTML
<img src="http://owenmelbourne.com/arrow.svg">
CSS
img {width: 100px}
path {
fill: blue;
}
Yet I always get
The SVG Code looks like
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="9.334px" height="11.881px" viewBox="0 0 9.334 11.881" enable-background="new 0 0 9.334 11.881" xml:space="preserve">
<path fill="#999999" d="M4.159,5.942L0.202,1.884c0,0-0.609-1.032,0.288-1.641s1.471,0.118,1.471,0.118L6.29,4.877
c0,0,1.15,0.947,0.254,1.894c-0.896,0.947-3.94,4.143-3.94,4.143L2.08,11.438c0,0-0.861,0.996-1.759,0
c-0.93-1.031,0.863-2.418,0.863-2.418L4.159,5.942z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
If anybody could shed some light on the matter it would be much appreciated.
Thanks

Changing the fill attribute will never work in this situation, because the image itself already has a fill. It won't be 'replaced' or 'redrawn' using the new attributes.
I also don't think this will work even if you took out the color command in the SVG file.

There's two ways to get it done.
Delete the value inside the fill attribute (fill="") and modify it via external CSS
Just change the color value inside the fill attribute.
And just to keep it nice, delete all the extra g tags, you don't need them.
<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"
width="9.334px" height="11.881px" viewBox="0 0 9.334 11.881" enable-
background="new 0 0 9.334 11.881" xml:space="preserve">
<path fill="" d="M4.159,5.942L0.202,1.884c0,0-0.609-1.032,0.288-1.641s1.471,0.118,1.471,0.118L6.29,4.877
c0,0,1.15,0.947,0.254,1.894c-0.896,0.947-3.94,4.143-3.94,4.143L2.08,11.438c0,0-0.861,0.996-1.759,0
c-0.93-1.031,0.863-2.418,0.863-2.418L4.159,5.942z"/>
</svg>
Once you have no value for the fill attribute, change the color with CSS.
<style>
svg{ fill: red; }
</style>
Or the second option...
<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"
width="9.334px" height="11.881px" viewBox="0 0 9.334 11.881" enable-
background="new 0 0 9.334 11.881" xml:space="preserve">
<path fill="#ff0000" d="M4.159,5.942L0.202,1.884c0,0-0.609-1.032,0.288-1.641s1.471,0.118,1.471,0.118L6.29,4.877
c0,0,1.15,0.947,0.254,1.894c-0.896,0.947-3.94,4.143-3.94,4.143L2.08,11.438c0,0-0.861,0.996-1.759,0
c-0.93-1.031,0.863-2.418,0.863-2.418L4.159,5.942z"/>
</svg>
This will make it red.
Try both on your fiddle and use the one the best works for You.
Tadaaa

CSS fills, and other SVG-specific rules, won't apply to an SVG rendered with an <img> tag:
// CSS fills won't apply to this
<img src="image.svg">
You need the SVG to be rendered inline in order for CSS fills to work.
// CSS fills will apply to this
<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"
width="9.334px" height="11.881px" viewBox="0 0 9.334 11.881" enable-
background="new 0 0 9.334 11.881" xml:space="preserve">
<path fill="" d="M4.159,5.942L0.202,1.884c0,0-0.609-1.032,0.288-1.641s1.471,0.118,1.471,0.118L6.29,4.877
c0,0,1.15,0.947,0.254,1.894c-0.896,0.947-3.94,4.143-3.94,4.143L2.08,11.438c0,0-0.861,0.996-1.759,0
c-0.93-1.031,0.863-2.418,0.863-2.418L4.159,5.942z"/>
</svg>
CSS:
#Layer_1 {
fill: blue;
}
Also, you could also use Javascript to automatically convert SVG's into inline elements. However if you're dealing with a few static SVG's for an interface (e.g. your theme), it's best to just copy-paste them inline.

Resources