Css property clip-path is work fine but mask or -webkit-mask is not working properly in this example.
Please help me to solve this because my project is totally depended on masking image with svg file.
In clip-path, i can't resize image in responsive views so i have only one way to solve this problem.
So please check example code , may be i have made any mistake.
You need to reduce your SVG code and remove all the g element to keep only the path like this:
https://jsfiddle.net/hro4wbzf/
Then you use this inside the mask and you do the rotation with CSS if needed:
https://jsfiddle.net/7kyazn30/
Related: How to resize ClipPath area of SVG?
For a huge online svg, I recommend you use the tag ... , instead of passing it entirely in the url() property of your css as you did. The risk of error is greater. So here's what I suggest.
<mask id="maskMaskSource" class="MaskType" maskContentUnits="objectBoundingBox">
<svg> .... </svg>
</mask>
And in your css:
#maskMaskSource {
mask-image: url(#maskMaskSource);
}
.MaskType {
mask-type: alpha;
}
You can get a more detailed explanation here: https://lab.iamvdo.me/css-svg-masks/#testM7
Related
This question already has answers here:
SVG data image not working as a background-image in a pseudo element
(4 answers)
Closed 2 years ago.
basically my question is the same as this one: SVG path as div dackground
I tried the solution given there, and it works in general.
My problem: I need to change the color of the line made with the SVG.
It is rendered in black and when I add the "fill"-Attribute to the path, nothing is rendered at all.
This is my rendered background image in the dev-tools
Thank you in advance.
Background img isn't a part of the DOM and you can't manipulate it. Possibility would be to use it regularly, embed it in a page in a normal way, but position it absolutely, make it full width & height of a page and then use z-index css property to put it behind all the other DOM elements on a page.
Only you need to do is to add fill and fill-opacity property in style attribute like this
<path style="fill:red;fill-opacity:1;" ...>
div.back {
width:600px;
height:120px;
background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="100" viewBox="0 0 4442 720"><path style="fill:red;fill-opacity:1;" d="M36,297.64c317.62,0,428,134.58,696,136.74S1160,364,1436,389s431.72-102.09,618-91.36,505.93,73.37,715,72.29,339,72,674,64.45,712.27,157.83,920,174l46,111.14H36Z" ></path></svg>');
background-size:cover;
background-color:pink;
}
<div class="back"></div>
Well, it's really wired.
I have found a solution, you can write <path fill="blue" (with the name of the color similar to the result you want) and it works. But if you write #00F or "#00F" instead of "blue" it doesn't work!!! The reason is unknown, so I suggest you to use the name of a color similar to the hexadecimal rgb you want.
Anyway, for the background-color if you write for example background-color:#7d212b; rather than background-color:pink; it works!
I am playing around with SVGs (trying to replace icon fonts with SVG.) I got it to render the image/svg using object tag. However, I can't get it to change color from CSS. Assuming, I prefer coloring it from CSS, is there a way to do that while I use to embed SVG.
<object class="partnerLogo" type="image/svg+xml" data="assets/logos/sample.svg">
Your browser does not support SVG
</object>
CSS, I tried so far:
.partnerLogo {
width: 100%;
height: 100px;
color: red;
color-fill: red;
}
In sample.svg file, I added, <?xml-stylesheet type="text/css" href="../css/styles.css"?> just before
styles.css is being added to the page.
Thanks!
It isn't possible to directly modify the fill if you're using the SVG using the <object> method. The SVG is included as a document fragment inside the object tag, so your properties aren't passed as you can see in this image.
However, there are two ways you can modify the colors of an external SVG.
1) Use Javascript (recommended)
Using Javascript you can fetch the SVG contents via an XHR, and then inject it as inline SVG. As it's inline SVG technically, you can modify the fill color. There's a library I have written (svg-loader) that make it really easy to do this.
You just need to include the library and use data-src attributes to load SVGs.
Example:
Here, I have included a logo in three different formats, modifying the fill color.
<script type="text/javascript" src="https://unpkg.com/external-svg-loader#latest/svg-loader.min.js" async></script>
<div style="display:flex;">
<div style="background:black;">
<svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="yellow"></svg>
</div>
<div style="background:purple;">
<svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="white"></svg>
</div>
<div style="background:green;">
<svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="red"></svg>
</div>
</div>
2) Use filter CSS property
You can use the filter CSS property to reach any color using bunch of operations (brightness, contrast, hue-rotate..). There an existing stack overflow discussion on this.
Example:
.red {
filter: invert(20%) sepia(97%) saturate(4013%) hue-rotate(353deg) brightness(93%) contrast(127%);
}
<img src="https://s2.svgbox.net/assets/logo-white.svg" class="red" />
The big drawback here is that you'd need to calculate this for every color (using this) and doesn't make it obvious how it works. Also, it won't work well with SVGs having multiple colors.
As far as I know, color in SVG-CSS should be stroke for borders and fill for backgrounds:
.partnerLogo {
width: 100%;
height: 100px;
stroke: red;
fill: red;
}
You can't use external CSS classes to style a SVG called within an < object > element, despite a lot of blog posts in the subject says you can interact with, buit this is misleading for this particular case. You must add the formattings inline, inside the actual SVG.
If you need to access and alter the actual objects and paths of an SVG from your main css file, you must embedd it inline, using the < svg > tag.
Here's a post that covers it all:
https://vecta.io/blog/best-way-to-embed-svg
I know this is an old question now - but this is for any future readers who want to colour their SVGs with pure CSS rather than have to use JS. I find this method quite convenient compared to other methods - and you can even colour your SVGs with a gradient etc.!
I simply make a div which will contain my SVG and give it a class.
HTML:
<div class="colourful-svg"></div>
Then the colour is done using masks and background colour in your CSS.
CSS:
.colourful-svg {
mask-image: url("path/to/your/svg-file.svg");
background: green;
// Make sure you define dimensions for your div otherwise it won't show up
height: 500px;
width: 500px;
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
}
This will make your SVG fill the div you had made and therefore be the size you need it to. It then uses a mask to essentially only show your background colour through the SVG you have linked to using the url() function.
Masks now have pretty good support with prefixes (about 94% globally from caniuse.com at the time of writing), so I think this is quite a simple and easy way to implement colour SVGs - I hope someone finds this useful!
I am new to svg icons and I just need to change the color of this icon on hover.
This is what I have so far: jsfiddle.net
.search-social :hover .search-icon {
fill: #72dcff;
}
It's just working from the fiddle as you can see since I applied.search-social on both of them.
But is this solution clean or do you suggest a better solution?
https://jsfiddle.net/e1491y39/4/
I think it's because you've got strokes and fills and separate pieces. So if you make it a single path, you could just use that single path. Otherwise, you could use a hover on the SVG itself. (See jsFiddle.)
.
I'm trying to recolor a simple SVG image with CSS (as I saw here http://codepen.io/chriscoyier/pen/evcBu ):
My HTML:
<img src="http://dl.dropbox.com/u/12091580/rwdicon/icon-menu.svg" class="myMenu" alt="menu">
My CSS:
.myMenu { fill: red; }
It's not working (see http://jsfiddle.net/sexyzane/1hojaccb/ )!
What am I doing wrong?
fill is used for svg element markup, you have an img element with an svg source, as such you cannot use fill to change the image color.
Instead, if you want to colorize the image, you may want to look into applying a CSS filter effect to the img tag, although this may not be able to achieve the exact result you're after.
Demo Fiddle
I wonder if it's possible to apply svg filter to clipped html content. All demos I found have clipping and filtering separate.
Here's an example: http://jsfiddle.net/B7593/1/. I want the yellow circle to drop a shadow.
Tried adding filter=url('#dropshadow') / style='filter:url(#dropshadow)' to circle / clipPath / div elements, but none of these worked.
I don't think you can do it the way you're approaching it - even if you could make the shadow a part of the clip, you wouldn't see it when you applied the clip because none of the colour is retained, just the opacity of the pixels is used to determine what shows through. What will work (in Firefox at least), is to apply both the clip and the filter to content within the SVG like this:
<g filter="url(#dropshadow)">
<foreignObject width="300" height="300" clip-path="url(#c1)">
<body>
<div id="target"></div>
</body>
</foreignObject>
</g>
Here's a full example.