Related
I created SVG sprite, where icons are on stack and displayed when targeting chosen ID. It works ok, but I don't know why, icons not appear on Safari, I can't find explanation in case when you're using SVG as a background. Is any one familiar with this problem?
SVG
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="icon" class="icon" version="1.1">
<defs>
<style>
svg .icon {
display: none;
}
svg .icon:target {
display: inline-block;
}
</style>
</defs>
<svg viewBox="0 0 24 24">
<g id="icon-instagram" class="icon" fill="#fff">
<path fill-rule="nonzero"
d="M17.2808471,0 L6.58644706,0 C2.95468235,0 0,2.95482353 0,6.58658824 L0,17.2809882 C0,20.9128941 2.95468235,23.8675765 6.58644706,23.8675765 L17.2808471,23.8675765 C20.9128941,23.8675765 23.8675765,20.9127529 23.8675765,17.2809882 L23.8675765,6.58658824 C23.8677176,2.95482353 20.9128941,0 17.2808471,0 Z M21.7500706,17.2809882 C21.7500706,19.7452235 19.7452235,21.7499294 17.2809882,21.7499294 L6.58644706,21.7499294 C4.12235294,21.7500706 2.11764706,19.7452235 2.11764706,17.2809882 L2.11764706,6.58658824 C2.11764706,4.12249412 4.12235294,2.11764706 6.58644706,2.11764706 L17.2808471,2.11764706 C19.7450824,2.11764706 21.7499294,4.12249412 21.7499294,6.58658824 L21.7499294,17.2809882 L21.7500706,17.2809882 Z"/>
<path fill-rule="nonzero"
d="M11.9337882 5.784C8.54258824 5.784 5.78371765 8.54287059 5.78371765 11.9340706 5.78371765 15.3251294 8.54258824 18.0838588 11.9337882 18.0838588 15.3249882 18.0838588 18.0838588 15.3251294 18.0838588 11.9340706 18.0838588 8.54287059 15.3249882 5.784 11.9337882 5.784zM11.9337882 15.9660706C9.7104 15.9660706 7.90136471 14.1573176 7.90136471 11.9339294 7.90136471 9.7104 9.71025882 7.90150588 11.9337882 7.90150588 14.1573176 7.90150588 15.9662118 9.7104 15.9662118 11.9339294 15.9662118 14.1573176 14.1571765 15.9660706 11.9337882 15.9660706zM18.3417882 3.98837647C17.9337882 3.98837647 17.5329882 4.15355294 17.2448471 4.44296471 16.9552941 4.73096471 16.7888471 5.13190588 16.7888471 5.54131765 16.7888471 5.94945882 16.9554353 6.35025882 17.2448471 6.63967059 17.5328471 6.92767059 17.9337882 7.09425882 18.3417882 7.09425882 18.7512 7.09425882 19.1507294 6.92767059 19.4401412 6.63967059 19.7295529 6.35025882 19.8947294 5.94931765 19.8947294 5.54131765 19.8947294 5.13190588 19.7295529 4.73096471 19.4401412 4.44296471 19.1521412 4.15355294 18.7512 3.98837647 18.3417882 3.98837647z"/>
</g>
</svg>
<svg viewBox="0 0 24 24">
<g id="icon-facebook" class="icon" fill="#fff">
<path d="M2.93630055,4.93539414 L2.93630055,8.17223941 L0.564884222,8.17223941 L0.564884222,12.1302664 L2.93630055,12.1302664 L2.93630055,23.8921306 L7.80769311,23.8921306 L7.80769311,12.1305943 L11.0766237,12.1305943 C11.0766237,12.1305943 11.3827734,10.2327507 11.5311748,8.15764524 L7.82611347,8.15764524 L7.82611347,5.45138285 C7.82611347,5.04690017 8.35724295,4.50281631 8.88219587,4.50281631 L11.5363128,4.50281631 L11.5363128,0.382285714 L7.92761676,0.382285714 C2.81588497,0.382012415 2.93630055,4.34397487 2.93630055,4.93539414 Z"/>
</g>
</svg>
CSS
.icon-instagram {
width: 24px;
height: 24px;
background: url("../svg/viva-sprite.svg#icon-instagram") no-repeat;
}
.icon-facebook {
width: 24px;
height: 24px;
background: url("../svg/viva-sprite.svg#icon-facebook") no-repeat;
}
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/.
Whenever I try to position a scaled SVG with position: absolute;, and use 0 as the positioning parameter (i.e. top:0;) the svg does not seem to connect seamlessly.
Especialy when zooming or when creating a responsive layout, this seems to occure.
Consider the following example:
an item with SVG's as rounded corners:
<div class="item">
<svg class="corner top-left" 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"
viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
<path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
<line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/>
</svg>
<svg class="corner top-right" 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"
viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
<path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
<line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/>
</svg>
<svg class="corner bottom-left" 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"
viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
<path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
<line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/>
</svg>
<svg class="corner bottom-right" 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"
viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
<path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
<line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/>
</svg>
</div>
The corners are positioned with position: absolute; and rotated in css
.corner {
position: absolute;
height: 20px;
}
.top-left {
left: 0;
top: 0;
}
.top-right {
top: 0;
right: 0;
transform: rotate(90deg);
}
.bottom-left {
bottom: 0;
left: 0;
transform: rotate(-90deg);
}
.bottom-right {
bottom: 0;
right: 0;
transform: rotate(180deg);
}
Now, depending on your screen resolution, you'll see the corners won't all fit seamlessly to the edge. Also when zooming in/out to the website oyu'll see a gap between the SVG and the edge of the element.
A dirty fix is to just offset the element minus 1 pixel in the direction it is positioned. However, the gap seems to be smaller than 1 pixel, thus breaking the design of the element when offsetting 1 pixel. Also, the gap does not appear all the time, only at certain pixel breakpoints.
Does anyone know how to fix this?
FIDDLE
To clarify, I want to prevent these lines from happening:
I'm not sure there is a particularly elegant solution to this problem. It affects Firefox mostly, because I believe Chrome/Webkit tends to snap elements to pixel boundaries, whereas Firefox doesn't.
One solution is to alter your paths so that they draw slightly outside the SVG and then set the <svg> to overflow="visible".
<svg class="corner top-left" ...snip... viewBox="0 0 10 10" overflow="visible">
<path class="st0" d="M10,0 V-2H-2V10H0c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
</svg>
Here, for this top-left SVG, I have created a two-unit "porch" up and to the left. Then if overflow is set to visible, the path will overdraw the little red lines caused by anti-aliasing/rounding.
Here's a demo fiddle with (only) the top left SVGs modified.
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>
I've got two items I can't figure out. I'm trying to center both arrows shown in the image on either side of the div box (no matter what the height, they are always centered). The box is min-height and I need the arrows to be centered depending on the height of the box.
Also, when the media screen kicks in, I want them to always display on the left and right no matter where the user has scrolled. I don't have a clue how to keep them in place when the user scrolls.
Any help you can provide is appreciated.
CSS
#recout{
text-align:center;
width: 80%;
margin: 0 auto;
text-align: center;
}
.recleft,
.recright{
display: inline-block;
width: 50px;
min-height: 550px;
margin: 5px;
}
.recin{
background: #000000;
display: inline-block;
vertical-align:top;
min-height: 550px;
margin: 0;
width: 550px;
border-radius: 70px 70px 0 0;
}
HTML
<div id= "recout">
<div class= "recleft">
<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"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<circle fill="#9FA1A4" cx="25" cy="25" r="25"/>
<g>
<g>
<path fill="#FFFFFF" d="M31.2,8.4c1,0,2,0.4,2.8,1c0.9,0.7,1.4,1.8,1.4,2.9c0,1.1-0.5,2.2-1.4,2.9l-11.8,10l11.8,10
c0.9,0.7,1.4,1.8,1.4,2.9s-0.5,2.1-1.4,2.9c-1.5,1.3-4,1.3-5.5,0L13.2,28.1c-0.9-0.7-1.4-1.8-1.4-2.9c0-1.1,0.5-2.1,1.4-2.9
L28.4,9.4C29.2,8.8,30.2,8.4,31.2,8.4z"/>
</g>
</g>
</svg>
</div>
<div class= "recin"></div>
<div class= "recright">
<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"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<circle fill="#9FA1A4" cx="25" cy="25" r="25"/>
<g>
<g>
<path fill="#FFFFFF" d="M20,42c-1,0-2-0.4-2.8-1c-0.9-0.7-1.4-1.8-1.4-2.9c0-1.1,0.5-2.2,1.4-2.9l11.8-10l-11.8-10
c-0.9-0.7-1.4-1.8-1.4-2.9s0.5-2.1,1.4-2.9c1.5-1.3,4-1.3,5.5,0L38,22.3c0.9,0.7,1.4,1.8,1.4,2.9c0,1.1-0.5,2.1-1.4,2.9L22.7,41
C22,41.7,21,42,20,42z"/>
</g>
</g>
</svg>
</div>
If I understand you right you want the svg to be vertically centerd inside the .recleft and .recright respectively.
To do that use position: absolute on a wrapper around the svg (it looks weird when applying it directly to the svg), set top: 50%, this will center the div, and finally apply position: relative to the parent so that the wrapper div is absolutely positioned relative to this parent. See this JSFiddle
For the problem with the mobile view you would need to set position: fixed; like so: https://jsfiddle.net/m9xqnh8y/1/
And for the problem that if the .recin gains in height. I made a flexbox containing recleft, recin and recright, this way the other divs automatically take up the full height and thus the arrows also remain in the middle. See here