Here is my svg code, when i add css filter shadow
there is unwanted border shadow on the graphic, but i don't see here in snippet. doesn't anyone can tell what is going on?
.shadow {
-webkit-filter: drop-shadow(0px 3px 10px rgba(0,0,0,.8));
filter: drop-shadow(0px 0px 10px rgba(0,0,0,.8));
fill:white;
}
<div style="background:gray; height:500px;">
<svg version="1.1" id="Layer_1" width=300px class="shadow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 56.69 56.69" xml:space="preserve">
<g>
<path d="M32.61,29.55V22.8c0-0.42-0.35-0.77-0.77-0.77h-2.53V7.13h3.21c1.22,0,3.67-2.38,3.67-5.53c0-0.42-0.35-0.77-0.77-0.77
H22.08l-0.64,0.03c-0.41,0.02-0.73,0.36-0.73,0.77c0,2.89,2.14,5.16,2.23,5.27c0.14,0.15,0.35,0.24,0.56,0.24h4.25v14.89h-2.52
c-0.42,0-0.77,0.35-0.77,0.77v6.74c-2.08,1.36-3.36,3.69-3.36,6.18c0,4.09,3.34,7.42,7.42,7.42s7.41-3.34,7.41-7.42
C35.96,33.24,34.68,30.92,32.61,29.55z M23.86,5.59c-0.4-0.5-1.29-1.73-1.53-3.2h12.26c-0.31,1.89-1.69,3.09-2.1,3.2H23.86z
M26.02,23.57h5.05v5.8h-5.05V23.57z M28.55,41.6c-3.24,0-5.88-2.63-5.88-5.88c0-1.92,0.96-3.71,2.52-4.8
c0.02,0,0.03,0.01,0.05,0.01h6.6c0.02,0,0.03-0.01,0.04-0.01c1.57,1.09,2.53,2.88,2.53,4.8C34.41,38.96,31.78,41.6,28.55,41.6z"/>
<path d="M30.76,44.45c-0.42,0.04-0.73,0.42-0.69,0.85l0.92,9.01h-5.36l0.39-9.07c0.02-0.42-0.31-0.78-0.74-0.81
c-0.44-0.03-0.78,0.31-0.81,0.74l-0.43,9.87c-0.01,0.21,0.07,0.41,0.22,0.57c0.14,0.15,0.35,0.24,0.56,0.24h7.02
c0.22,0,0.42-0.09,0.58-0.26c0.14-0.17,0.22-0.38,0.2-0.6l-1.01-9.87C31.56,44.71,31.17,44.4,30.76,44.45z"/>
</g>
</svg>
</div>
I have found out the issue! in my end, i used .shadow, which is same name as bootstrap style attribute, so it also triggers bootstrap style as well.
Related
I have this facebook SVG icon, that I need to be able to change the circle color and the inside color (icon itself). How do I change it from transparent to white?
what I have
what I need
SVG code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- 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">
<div id="facebook">
<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="49.652px" height="49.652px" viewBox="0 0 49.652 49.652" style="enable-background:new 0 0 49.652 49.652;"
xml:space="preserve">
<g>
<g>
<path d="M24.826,0C11.137,0,0,11.137,0,24.826c0,13.688,11.137,24.826,24.826,24.826c13.688,0,24.826-11.138,24.826-24.826
C49.652,11.137,38.516,0,24.826,0z M31,25.7h-4.039c0,6.453,0,14.396,0,14.396h-5.985c0,0,0-7.866,0-14.396h-2.845v-5.088h2.845
v-3.291c0-2.357,1.12-6.04,6.04-6.04l4.435,0.017v4.939c0,0-2.695,0-3.219,0c-0.524,0-1.269,0.262-1.269,1.386v2.99h4.56L31,25.7z
"/>
</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>
<g>
</g>
</svg>
</div>
The problem is that the <path> in the SVG is just defining the shape of the black part of your icon.
If you want to make the "f" white, there are two options.
add a white shape behind the path so that it shows through the hole.
div {
background-color: orange;
}
<div id="facebook">
<svg id="Capa_1"
width="49.652px" height="49.652px" viewBox="0 0 49.652 49.652">
<circle cx="25" cy="25" r="20" fill="white"/>
<path d="M24.826,0C11.137,0,0,11.137,0,24.826c0,13.688,11.137,24.826,24.826,24.826c13.688,0,24.826-11.138,24.826-24.826
C49.652,11.137,38.516,0,24.826,0z M31,25.7h-4.039c0,6.453,0,14.396,0,14.396h-5.985c0,0,0-7.866,0-14.396h-2.845v-5.088h2.845
v-3.291c0-2.357,1.12-6.04,6.04-6.04l4.435,0.017v4.939c0,0-2.695,0-3.219,0c-0.524,0-1.269,0.262-1.269,1.386v2.99h4.56L31,25.7z"/>
</svg>
</div>
Split the path into its two parts: the outside circle, and the "f" shape. Make the "f" shape white.
div {
background-color: orange;
}
<div id="facebook">
<svg id="Capa_1"
width="49.652px" height="49.652px" viewBox="0 0 49.652 49.652">
<path d="M24.826,0C11.137,0,0,11.137,0,24.826c0,13.688,11.137,24.826,24.826,24.826c13.688,0,24.826-11.138,24.826-24.826 C49.652,11.137,38.516,0,24.826,0z"/>
<path d="M31,25.7h-4.039c0,6.453,0,14.396,0,14.396h-5.985c0,0,0-7.866,0-14.396h-2.845v-5.088h2.845 v-3.291c0-2.357,1.12-6.04,6.04-6.04l4.435,0.017v4.939c0,0-2.695,0-3.219,0c-0.524,0-1.269,0.262-1.269,1.386v2.99h4.56L31,25.7z" fill="white"/>
</svg>
</div>
Pick which one you prefer.
Well, you can't change the color of the f in the logo, as the black is all one shape, so it's actually cut out from the circle. What you can do, is add another shape that sits behind the logo in your SVG.
I cut down the SVG code you have:
SVG:
<div id="facebook">
<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="49.652px" height="49.652px" viewBox="0 0 49.652 49.652" style="enable-background:new 0 0 49.652 49.652;" xml:space="preserve">
<circle cx="25" cy="25" r="20" class="circle"/>
<path d="M24.826,0C11.137,0,0,11.137,0,24.826c0,13.688,11.137,24.826,24.826,24.826c13.688,0,24.826-11.138,24.826-24.826
C49.652,11.137,38.516,0,24.826,0z M31,25.7h-4.039c0,6.453,0,14.396,0,14.396h-5.985c0,0,0-7.866,0-14.396h-2.845v-5.088h2.845
v-3.291c0-2.357,1.12-6.04,6.04-6.04l4.435,0.017v4.939c0,0-2.695,0-3.219,0c-0.524,0-1.269,0.262-1.269,1.386v2.99h4.56L31,25.7z
" />
</svg>
</div>
CSS
#facebook {
background-color: red;
}
.circle {
fill: white;
}
Working fiddle: https://jsfiddle.net/disinfor/gvpeLn91/
The most obvious is of course to edit the SVG, another option would be to add a pseudo element matching the black circle.
This trick could be handy if one for example loads icons from a CDN or similar, where it is not possible to edit the SVG.
div {
position: relative;
display: inline-block;
background-color: red;
padding: 10px;
}
div svg {
position: relative;
display: block;
}
div::before {
content: '';
position: absolute;
left: 10px;
top: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
border-radius: 50%;
background-color: white;
}
<div id="facebook">
<svg id="Capa_1" width="49.652px" height="49.652px" viewBox="0 0 49.652 49.652">
<path d="M24.826,0C11.137,0,0,11.137,0,24.826c0,13.688,11.137,24.826,24.826,24.826c13.688,0,24.826-11.138,24.826-24.826
C49.652,11.137,38.516,0,24.826,0z M31,25.7h-4.039c0,6.453,0,14.396,0,14.396h-5.985c0,0,0-7.866,0-14.396h-2.845v-5.088h2.845
v-3.291c0-2.357,1.12-6.04,6.04-6.04l4.435,0.017v4.939c0,0-2.695,0-3.219,0c-0.524,0-1.269,0.262-1.269,1.386v2.99h4.56L31,25.7z"/>
</svg>
</div>
The best way I found so far is to use the CSS clip-path property. It works with any transparent image.
img {
background: #ff1234;
clip-path: circle(50% at 50% 50%);
}
<img src="https://image.flaticon.com/icons/png/512/8/8730.png" width="150" height="150" />
More info about clipping and masking at https://css-tricks.com/clipping-masking-css/.
I've created this svg to use to style a dropdown.
<?xml version="1.0" encoding="utf-8"?>
<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 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<g>
<line x1="10" y1="10" x2="10" y2="117" stroke-width="1" stroke="#ccc"/>
<path fill="#00305e" d="M95.0603,45.0773l1.9872,2.025c1.9246,1.9611,1.906,5.1078-0.0415,7.0461L68.0522,82.9645
c-1.9507,1.9414-5.1035,1.9414-7.0542,0L32.0442,54.1483c-1.9475-1.9383-1.9661-5.0849-0.0415-7.0461l1.9872-2.025
c1.947-1.984,5.1386-1.9991,7.1042-0.0334l23.431,23.431l23.431-23.431C89.9218,43.0782,93.1133,43.0933,95.0603,45.0773z"/>
</g>
</svg>
As you can see the line color is #ccc. I've styled the dropdown to have this style:
select {
border: 1px solid #ccc;
}
My problem is that the svg line color is much brighter than the border color of the select.
This is the result in Chrome on a OSX Sierra:
The problem is that your SVG is getting scaled down. The grey line in your SVG has a width of one unit, which is not necessarily the same as 1 pixel.
It looks like you are scaling the SVG down to 44 pixels or so, so that grey line is ending up with a width of 1 * 44/128 = 0.34. So antialiasing will mean that it will get draw at about a third the darkness of the border lines.
You have a number of solution, including...
Make your line darker to compensate. It'd probably need to be #444 or so.
Or make your line thicker to compensate. Roughly 3x as thick.
Or use vector-effect: non-scaling-stroke;, so that the line width does not scale.
svg {
width: 44px;
border: solid 1px #ccc;
border-left: none;
}
line {
vector-effect: non-scaling-stroke;
}
<?xml version="1.0" encoding="utf-8"?>
<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 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<g>
<line x1="10" y1="10" x2="10" y2="117" stroke-width="1" stroke="#ccc"/>
<path fill="#00305e" d="M95.0603,45.0773l1.9872,2.025c1.9246,1.9611,1.906,5.1078-0.0415,7.0461L68.0522,82.9645
c-1.9507,1.9414-5.1035,1.9414-7.0542,0L32.0442,54.1483c-1.9475-1.9383-1.9661-5.0849-0.0415-7.0461l1.9872-2.025
c1.947-1.984,5.1386-1.9991,7.1042-0.0334l23.431,23.431l23.431-23.431C89.9218,43.0782,93.1133,43.0933,95.0603,45.0773z"/>
</g>
</svg>
I've got an SVG file with two parts to it. I've managed to create a hover state to change the color of the piece with a class of .segment_1 when I hover over it, (hovering over .segment_1 changes the color, that part works). I also have another element in the same SVG file that I've been able to hide successfully using CSS, (#matter). The problem is that I can't seem to get the div named #matter to also show with the hover state. The color change works but the show state of the div named (#matter) does not. Thanks in advance for any help on this.
.segment_1 {fill:#a1a1a1;}
.segment_1:hover {fill:#F9A92F;}
#matter {display: none;}
.segment_1:hover #matter {display:block;}
<svg version="1.1" id="rocket_x5F_svg" 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">
<style type="text/css">
.st0{fill:#E6E7E8;}
.st1{fill:#F9AA30;}
</style>
<g id="rocket">
<path id="segment_x5F_1" class="st0 segment_1" d="M305.7,12.3c-14.8,21.5-24.6,47.6-34.8,71.1c10.3,23.8,20.3,43.2,35.3,65
c14.9-21.7,24.4-41.1,34.6-64.5C330.5,60.1,320.8,34,305.7,12.3"/>
</g>
<g id="matter">
<path class="st1" d="M278.4,76.7h-139c-5.4,0-9.9-4.4-9.9-9.9V47.4c0-5.4,4.4-9.9,9.9-9.9h139c5.4,0,9.9,4.4,9.9,9.9v19.4
C288.2,72.2,283.8,76.7,278.4,76.7z"/>
</g>
</svg>
The line of code that seems to be giving me the problem is
.segment_1:hover #matter {display:block;}
You are correct. That CSS rule is not going to work. .segment_1 #matter means "the descendant of ".segment_1" which has the id 'matter'". But "#matter" is not a child. It is the sibling of #matter's parent.
The nearest you can get with pure CSS is apply the hover pseudo-selector to the parent (#rocket) and use the sibling combinator ("+")
#rocket:hover + #matter {display:block;}
Demoed here:
.segment_1 {fill:#a1a1a1;}
.segment_1:hover {fill:#F9A92F;}
#matter {display: none;}
#rocket:hover + #matter {display:block;}
<svg version="1.1" id="rocket_x5F_svg" 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">
<style type="text/css">
.st0{fill:#E6E7E8;}
.st1{fill:#F9AA30;}
</style>
<g id="rocket">
<path id="segment_x5F_1" class="st0 segment_1" d="M305.7,12.3c-14.8,21.5-24.6,47.6-34.8,71.1c10.3,23.8,20.3,43.2,35.3,65
c14.9-21.7,24.4-41.1,34.6-64.5C330.5,60.1,320.8,34,305.7,12.3"/>
</g>
<g id="matter">
<path class="st1" d="M278.4,76.7h-139c-5.4,0-9.9-4.4-9.9-9.9V47.4c0-5.4,4.4-9.9,9.9-9.9h139c5.4,0,9.9,4.4,9.9,9.9v19.4
C288.2,72.2,283.8,76.7,278.4,76.7z"/>
</g>
</svg>
This works for your sample, but may not work for your real file. It'll mean that hovering over any child of the rocket will display the #matter element.
You will probably be able to achieve what you want by rearraging the SVG file so that the rocket part and it's popup are siblings.
.segment_1 {fill:#a1a1a1;}
.segment_1:hover {fill:#F9A92F;}
.popup {display: none;}
.segment:hover .popup {display:block;}
<svg version="1.1" id="rocket_x5F_svg" 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">
<style type="text/css">
.st0{fill:#E6E7E8;}
.st1{fill:#F9AA30;}
</style>
<g id="rocket">
<g class="segment">
<path id="segment_x5F_1" class="st0" d="M305.7,12.3c-14.8,21.5-24.6,47.6-34.8,71.1c10.3,23.8,20.3,43.2,35.3,65
c14.9-21.7,24.4-41.1,34.6-64.5C330.5,60.1,320.8,34,305.7,12.3"/>
<path class="st1 popup" d="M278.4,76.7h-139c-5.4,0-9.9-4.4-9.9-9.9V47.4c0-5.4,4.4-9.9,9.9-9.9h139c5.4,0,9.9,4.4,9.9,9.9v19.4
C288.2,72.2,283.8,76.7,278.4,76.7z"/>
</g>
</g>
</svg>
If you are unable to do that, then you will need to resort to Javascript.
I am trying to aligning the icon inside an iron-icon with the border.
The border is a circle with filling and I want my svg to be in the middle.
I fixed it, but it seems hacky by moving the svg 5 px to the right.
The SVG path is the cause of the problem. It is slighty offset and gets aligned to the top and does not scale to the size of the iron-icon.
The problem does not occur if I use a iron-icon default icon.
Element:
<style>
iron-icon {
--iron-icon-height: 48px;
--iron-icon-width: 48px;
border: 10px solid #fff;
border-radius: 50%;
background-color: var(--dark-theme-base-color);
box-shadow: 0 0 0 1px var(--dark-theme-base-color);
--iron-icon-fill-color: var(--dark-theme-text-color);
}
#HACKY FIX
iron-icon ::content > .style-scope {
margin-left: 5px;
}
</style>
<iron-icon class="circled-logo" icon="logo-icons:browse-and-buy"></iron-icon>
Icon set:
<iron-iconset-svg name="logo-icons" size="100">
<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="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100"
xml:space="preserve">
<defs>
<g id="browse-and-buy" transform="scale(3.0)">
<path d="M13,5c-0.6,0-1,0.4-1,1v4.6L5.7,4.3c-0.4-0.4-1-0.4-1.4,0
c-0.4,0.4-0.4,1,0,1.4l6.3,6.3H6c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h7c0.6,0,1-0.5,1-1V6C14,5.4,13.5,5,13,5z M25.7,24.3L19.4,18
H24c0.6,0,1-0.4,1-1c0-0.6-0.4-1-1-1h-7c-0.6,0-1,0.5-1,1v7c0,0.6,0.4,1,1,1s1-0.4,1-1v-4.6l6.3,6.3c0.4,0.4,1,0.4,1.4,0
C26.1,25.3,26.1,24.7,25.7,24.3z"/>
</g>
</defs>
</svg>
here's my css style
<style>
#asia > path:hover {
fill: red;
}
</style>
and heres the SVG element:
<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="800px" height="500px" viewBox="0 0 800 500" enable-background="new 0 0 800 500" xml:space="preserve">
<g transform="translate(0,239) scale(0.016963,-0.016963)" id="asia">
<path fill="" d="M39736.762-6721.546c-23.949-35.866-47.898-97.409-51.293-136.729
c-5.125-37.651-17.098-85.492-27.348-104.317c-10.246-20.495-17.098-66.667-13.699-102.533c3.453-59.815,8.578-68.393,53.02-76.914
c52.965-10.248,165.805,32.47,165.805,61.542c0,11.975,8.578,11.975,22.219,0c17.102-13.702,34.199-6.851,68.395,30.742
c25.617,25.677,46.113,59.815,46.113,75.245c0,15.371,13.703,27.346,32.527,27.346c20.496,0,39.32,15.371,46.113,39.32
c6.852,20.495,29.074,64.939,51.297,99.136c53.02,83.765,30.801,102.533-83.766,70.063c-150.43-40.99-155.555-40.99-191.422-8.521
c-18.824,18.768-41.047,35.866-51.293,40.99c-8.578,3.454-15.371,17.098-11.977,29.073
C39799.977-6641.178,39784.605-6654.88,39736.762-6721.546z"/>
</g>
</svg>
I want to add bevel and emboss style when I hover the path tag. I already read related topics and it seems that css emboss is not working on svg element. Any comments or suggestions appreciated.
Use an SVG filter to achieve your emboss effect and apply it on hover.
<svg width="7.5cm" height="5cm" viewBox="0 0 200 120"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="MyFilter" ...>
[...snip...]
</filter>
</defs>
<path fill="#D90000" class="button"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
</svg>
CSS:
.button:hover {
filter: url(#MyFilter);
}
Demo here
Note that SVG filters will not work on versions of IE <10.