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>
Related
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.
.fancybox-layout6 .cshero-fancybox-effect svg path {
stroke: #da1527;
fill: #FFF;
stroke-width: 8px;
}
<svg style="fill: #222;" height="60px" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 L50 100 L100 0" stroke-width="0"></path>
</svg>
I have an SVG triangle and I have rotated it to 90deg, I added the stroke, stroke-width but my problem is when I add stroke-line-join, it won't work
I guess what you missed is stroke property. So i added stroke="black". The stroke-linejoin="round" you can add it either in SVG itself or CSS. As of now, I added it in CSS
.fancybox-layout6 .cshero-fancybox-effect svg path {
stroke: #da1527;
fill: #FFF;
stroke-width: 8px;
stroke-linejoin: round;
}
<svg style="fill: #222;" height="60px" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 L50 100 L100 0" stroke="black"
></path>
</svg>
Your problem is that your path goes right to the edges of your SVG.
When you add a stroke width and line joins, they are overflowing the edges of your SVG, and getting cut off.
If we unstretch your SVG, add a blue border to show the boundaries of the SVG, and turn on overflow, it should be clear what is happening.
svg path {
stroke: #da1527;
fill: #FFF;
stroke-width: 8px;
}
svg {
width: 200px;
height: 200px;
border: dashed 1px blue;
overflow: visible;
}
<svg viewBox="0 0 100 100">
<path d="M0 0 L50 100 L100 0" stroke-width="0"></path>
</svg>
To fix that, you will either have to:
make your triangle path smaller, so that the stroke joins and caps fit inside your viewBox bounds, or
make your viewBox bigger, to tak account of the caps and joins.
In the example below I have chosen the "adjust the viewBox" approach.
svg path {
stroke: #da1527;
fill: #FFF;
stroke-width: 8px;
}
svg {
background: linen;
}
<svg style="fill: #222;" height="60px" preserveAspectRatio="none" version="1.1" viewBox="-4 -5 108 116" width="100%" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 L50 100 L100 0" stroke-width="0"></path>
</svg>
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 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
my code work in IE and Firefox.But it don't work with chrome
svg code:
<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="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<clipPath id="clipPath">
<polygon points="0,0 0,500 394,500 394,117 407.697,99.803 394,83 394,0 "/>
</clipPath>
</svg>
css code:
.page article{
width:48%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index:2;
padding:2% 5% 2% 2%;
clip-path:url(img/descripation_backgro_page1.svg#clipPath);
}
Chrome has a limitation, when using external SVGs:
„Partial support refers to supporting shapes and the url(#foo) syntax for inline SVG, but not shapes in external SVGs.“
Source: http://caniuse.com/css-clip-path