how can i make an svg responsive - html
Hello i'm new to using svg while watching a tutorial the autor created an svg file with the following attributes to make it resposive and it works for him, the problem is when i'm trying to do the same the shape gets bigger and it's not resposive at all. please help thank you
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 400 400">
<style type="text/css">
.st0{fill:#231F20;}
.circle{
fill:#27AAE1;
}
</style>
<g id="container" class="colors">
<circle class="st0" cx="200" cy="200" r="197.5"/>
</g>
<g id="dots" class="colors">
<path class="circle" id="c1" d="M146.98,363.54L146.98,363.54L146.98,363.54c-9.2-2.98-14.23- 12.851-11.25-22.05l0,0
c2.97-9.19,12.84-14.23,22.04-11.25l0,0c9.19,2.979,14.23,12.85,11.25,22.04l0,0c-2.4,7.409-9.26,12.109-16.64,12.109l0,0
C150.59,364.39,148.77,364.12,146.98,363.54z"/>
<path class="circle" id="c2" d="M231.13,352.25c-2.99-9.19,2.04-19.061,11.229-22.05l0,0c9.19-2.99,19.07,2.04,22.061,11.229l0,0
c2.979,9.19-2.04,19.061-11.23,22.05l0,0c-1.8,0.59-3.63,0.86-5.42,0.86l0,0C240.39,364.34,233.53,359.64,231.13,352.25z"/>
<path class="circle" id="c3" d="M61.03,301.16L61.03,301.16L61.03,301.16c-5.69-7.811-3.98-18.761,3.83-24.45l0,0
c7.81-5.7,18.76-3.98,24.45,3.83l0,0c5.7,7.81,3.98,18.75-3.83,24.45l0,0c-3.11,2.27-6.72,3.359-10.29,3.359l0,0
C69.79,308.35,64.46,305.85,61.03,301.16z"/>
<path class="circle" id="c4" d="M314.63,304.87c-7.82-5.69-9.55-16.63-3.86-24.45l0,0c5.681-7.82,16.63-9.54,24.45-3.86l0,0
c7.811,5.69,9.54,16.63,3.85,24.45l0,0l0,0l0,0c-3.42,4.71-8.76,7.21-14.159,7.21l0,0C321.34,308.22,317.729,307.13,314.63,304.87z
"/>
<path class="circle" id="c5" d="M28.13,200.18c-0.01-9.66,7.81-17.5,17.48-17.51l0,0c9.66-0.01,17.51,7.81,17.52,17.48l0,0
c0,9.66-7.82,17.5-17.49,17.52l0,0c0,0-0.01,0-0.02,0l0,0C35.97,217.67,28.13,209.84,28.13,200.18z"/>
<path class="circle" id="c6" d="M336.88,200c0-0.02,0-0.03,0-0.05l0,0c-0.01-0.08-0.01-0.16-0.01-0.24l0,0c-0.021-9.67,7.8-17.52,17.47-17.54
l0,0c9.66-0.02,17.51,7.8,17.53,17.46l0,0c0,0.07,0,0.14,0,0.21l0,0c0,0.05,0,0.11,0,0.16l0,0c0,0,0,0,0.01,0l0,0
c0,9.66-7.84,17.5-17.5,17.5l0,0C344.71,217.5,336.88,209.66,336.88,200z"/>
<path class="circle" id="c7" d="M64.7,123.58c-7.82-5.68-9.56-16.62-3.88-24.44l0,0c5.68-7.83,16.62-9.56,24.44-3.89l0,0
c7.82,5.68,9.56,16.63,3.88,24.45l0,0c-3.42,4.71-8.76,7.22-14.17,7.22l0,0C71.4,126.92,67.81,125.83,64.7,123.58z"/>
<path class="circle" id="c8" d="M310.6,119.34L310.6,119.34c-5.7-7.8-4-18.75,3.8-24.45l0,0c7.811-5.7,18.761-4,24.46,3.8l0,0
c5.7,7.81,4,18.76-3.81,24.46l0,0c-3.11,2.27-6.72,3.37-10.31,3.37l0,0C319.35,126.52,314.03,124.03,310.6,119.34z"/>
<path class="circle" id="c9" d="M135.43,58.64c-3-9.19,2.02-19.07,11.21-22.07l0,0c9.19-3,19.07,2.02,22.06,11.21l0,0
c3,9.19-2.01,19.07-11.2,22.07l0,0c-1.8,0.59-3.63,0.87-5.43,0.87l0,0C144.7,70.72,137.84,66.02,135.43,58.64z"/>
<path class="circle" id="c10" d="M242.09,69.71c-9.2-2.97-14.25-12.83-11.28-22.03l0,0c2.971-9.19,12.84-14.24,22.03-11.27l0,0
c9.2,2.97,14.25,12.83,11.28,22.03l0,0c-2.391,7.41-9.261,12.13-16.65,12.12l0,0C245.689,70.56,243.88,70.29,242.09,69.71z"/>
</g>
</svg>
With SVG, it gets a little weird:
First thing you should do is wrap the SVG tag in a parent DIV tag.
<div id="parent_element">
<svg id="your_svg" viewBox="0 0 400 400"></svg>
</div>
Add the attribute preserveAspectRatio="xMinyMin meet" to the SVG
<div id="parent_element">
<svg id="your_svg" preserveAspectRatio="xMinyMin meet" viewBox="0 0 400 400"></svg>
</div>
Looking at the CSS, you need to set the child element absolutely positioned relative to the parent element:
/*Parent container*/
div {
display: inline-block;
overflow: hidden;
padding-bottom: 100%;
position: relative;
vertical-align: middle;
}
/*SVG child*/
svg {
display: inline-block;
left: 0;
position: absolute;
top: 0;
}
Adjust as needed. Notice the padding-bottom hack. It is based on the height/width of the SVG ViewBox. For more information on that check out this Codrops Article and you can find another (and shorter) tutorial in this article
Related
<svg> is larger than <use>
I need to import svg from sprite by <use> tag so svg and use were the same size (use was as large as parent svg tag).
<svg>
<use xlink:href="#facebook-hover"></use>
</svg>
I have no idea what exactly causes that size difference, and how could I fix it.
Here is my demo, for those who would like to help me:
svg {
width: 200px;
height: 200px;
position: relative;
}
use {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<svg width="0" height="0" class="hidden">
<symbol version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 44 44" id="facebook-hover">
<title>ThirdParty/Facebook/2xpng1. Liquorice</title>
<defs>
<polygon id="path-1" points="0.001 0 40 0 40 40 0.001 40"></polygon>
</defs>
<g id="ThirdParty/Facebook/1.-Liquorice" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-3" transform="translate(2.000000, 2.000000)">
<g id="Clip-2"></g>
<path d="M37.793,0 L2.207,0 C0.989,0 0.001,0.988 0.001,2.208 L0.001,37.792 C0.001,39.012 0.989,40 2.207,40 L21.379,40 L21.379,24.532 L16.173,24.532 L16.173,18.476 L21.379,18.476 L21.379,14.022 C21.379,8.856 24.539,6.042 29.145,6.042 C30.697,6.038 32.249,6.118 33.793,6.276 L33.793,11.676 L30.621,11.676 C28.111,11.676 27.621,12.862 27.621,14.614 L27.621,18.468 L33.621,18.468 L32.841,24.524 L27.585,24.524 L27.585,40 L37.793,40 C39.011,40 40.001,39.012 40.001,37.792 L40.001,2.208 C40.001,0.988 39.011,0 37.793,0" id="Fill-1" fill="#002E88" mask="url(#mask-2)"></path>
</g>
</g>
</symbol>
</svg>
<svg>
<use xlink:href="#facebook-hover"></use>
</svg>
As I've commented: use a viewBox for the second svg. Try <svg viewBox="0 0 40 40"><use ... Also: in css you are forcing both evg elements to a 200px / 200px size. You can add width="200" instead. Also: the css roules for use are pointless. Also: you are putting a useless polygon inside a useless <defs> inside the symbol. You can delete the defs. More: The path is wrapped inside lots of groups. There is an empty group too. The path is masked by an inexistent mask-2. I've removed the useless groups and the mask attribute. Please take a look: <svg width="0" height="0" class="hidden"> <symbol id="facebook-hover"> <title>ThirdParty/Facebook/2xpng1. Liquorice</title> <path d="M37.793,0 L2.207,0 C0.989,0 0.001,0.988 0.001,2.208 L0.001,37.792 C0.001,39.012 0.989,40 2.207,40 L21.379,40 L21.379,24.532 L16.173,24.532 L16.173,18.476 L21.379,18.476 L21.379,14.022 C21.379,8.856 24.539,6.042 29.145,6.042 C30.697,6.038 32.249,6.118 33.793,6.276 L33.793,11.676 L30.621,11.676 C28.111,11.676 27.621,12.862 27.621,14.614 L27.621,18.468 L33.621,18.468 L32.841,24.524 L27.585,24.524 L27.585,40 L37.793,40 C39.011,40 40.001,39.012 40.001,37.792 L40.001,2.208 C40.001,0.988 39.011,0 37.793,0" id="Fill-1" fill="#002E88"></path> </symbol> </svg> <svg viewBox="0 0 40 40" width="200"> <use xlink:href="#facebook-hover"></use> </svg>
Why doesn't an SVG with a <use> tag scale like a regular SVG?
I have an SVG icon, I'm setting a fixed height for it (50px, say), but I want its width to be auto, that is, whatever it needs to be depending on the icon. (Pretty common and normal scenario, right?).
Now, the problem that I've been beating my head against the wall for, is that instead of embedding the SVG inline in the HTML, I'm intending to define it with the <symbol> tag and then reference it using the <use href="... tag, and doing so apparently requires me to set a fixed width as well as a fixed height or otherwise it will always default to about 150px, instead of just defaulting to the width of icon; this is not the case when you embed the SVG directly, you can see all of this in action in the following two snippets:
Directly-embedded SVG: (Works as expected, width is consistent with the width of the icon)
.icon {
height: 50px;
width: auto;
/* Aesthetics: */
background-color: gray;
border-radius: 5px;
}
<svg class="icon" viewBox="0 0 22.832 27.398">
<g transform="translate(-42.667)"> <g transform="translate(42.667)"> <path class="a" d="M62.074,9.133V7.991a7.991,7.991,0,1,0-15.982,0V9.133a3.429,3.429,0,0,0-3.425,3.425V23.973A3.429,3.429,0,0,0,46.092,27.4H62.074A3.429,3.429,0,0,0,65.5,23.973V12.557A3.429,3.429,0,0,0,62.074,9.133Zm-13.7-1.142a5.708,5.708,0,0,1,11.416,0V9.133H48.375ZM63.216,23.973a1.143,1.143,0,0,1-1.142,1.142H46.092a1.143,1.143,0,0,1-1.142-1.142V12.557a1.143,1.143,0,0,1,1.142-1.142H62.074a1.143,1.143,0,0,1,1.142,1.142Z" transform="translate(-42.667)"></path> </g> <g transform="translate(50.658 13.128)"> <path class="a" d="M195.425,245.333a3.416,3.416,0,0,0-1.142,6.639v1.922a1.142,1.142,0,1,0,2.283,0v-1.922a3.416,3.416,0,0,0-1.142-6.639Zm0,4.566a1.142,1.142,0,1,1,1.142-1.142A1.143,1.143,0,0,1,195.425,249.9Z" transform="translate(-192 -245.333)"></path> </g> </g>
</svg>
But using the <use> tag: (Width is coming from nowhere!)
.icon {
height: 50px;
width: auto;
/* Aesthetics: */
background-color: gray;
border-radius: 5px;
}
<svg style="display: none;">
<symbol id="lock" viewBox="0 0 22.832 27.398">
<g transform="translate(-42.667)"> <g transform="translate(42.667)"> <path class="a" d="M62.074,9.133V7.991a7.991,7.991,0,1,0-15.982,0V9.133a3.429,3.429,0,0,0-3.425,3.425V23.973A3.429,3.429,0,0,0,46.092,27.4H62.074A3.429,3.429,0,0,0,65.5,23.973V12.557A3.429,3.429,0,0,0,62.074,9.133Zm-13.7-1.142a5.708,5.708,0,0,1,11.416,0V9.133H48.375ZM63.216,23.973a1.143,1.143,0,0,1-1.142,1.142H46.092a1.143,1.143,0,0,1-1.142-1.142V12.557a1.143,1.143,0,0,1,1.142-1.142H62.074a1.143,1.143,0,0,1,1.142,1.142Z" transform="translate(-42.667)" /> </g> <g transform="translate(50.658 13.128)"> <path class="a" d="M195.425,245.333a3.416,3.416,0,0,0-1.142,6.639v1.922a1.142,1.142,0,1,0,2.283,0v-1.922a3.416,3.416,0,0,0-1.142-6.639Zm0,4.566a1.142,1.142,0,1,1,1.142-1.142A1.143,1.143,0,0,1,195.425,249.9Z" transform="translate(-192 -245.333)" /> </g> </g>
</symbol>
</svg>
<svg class="icon">
<use href="#lock"></use>
</svg>
I've already checked out this question, as well as this one, and I've realized that by adding the "viewBox" of the icon to the referencing SVG, the problem would be solved, like this:
.icon {
height: 50px;
width: auto;
/* Aesthetics: */
background-color: gray;
border-radius: 5px;
}
<svg style="display: none;">
<symbol id="lock" viewBox="0 0 22.832 27.398">
<g transform="translate(-42.667)"> <g transform="translate(42.667)"> <path class="a" d="M62.074,9.133V7.991a7.991,7.991,0,1,0-15.982,0V9.133a3.429,3.429,0,0,0-3.425,3.425V23.973A3.429,3.429,0,0,0,46.092,27.4H62.074A3.429,3.429,0,0,0,65.5,23.973V12.557A3.429,3.429,0,0,0,62.074,9.133Zm-13.7-1.142a5.708,5.708,0,0,1,11.416,0V9.133H48.375ZM63.216,23.973a1.143,1.143,0,0,1-1.142,1.142H46.092a1.143,1.143,0,0,1-1.142-1.142V12.557a1.143,1.143,0,0,1,1.142-1.142H62.074a1.143,1.143,0,0,1,1.142,1.142Z" transform="translate(-42.667)" /> </g> <g transform="translate(50.658 13.128)"> <path class="a" d="M195.425,245.333a3.416,3.416,0,0,0-1.142,6.639v1.922a1.142,1.142,0,1,0,2.283,0v-1.922a3.416,3.416,0,0,0-1.142-6.639Zm0,4.566a1.142,1.142,0,1,1,1.142-1.142A1.143,1.143,0,0,1,195.425,249.9Z" transform="translate(-192 -245.333)" /> </g> </g>
</symbol>
</svg>
<svg class="icon" viewBox="0 0 22.832 27.398"> <!-- Copy-pasted the viewbox here -->
<use href="#lock"></use>
</svg>
But obviously this is very inconvenient, repetitive, error-prone, and indeed ugly to write. So, I'd appreciate any workarounds. Isn't there a way to set the viewBox attribute to "auto" or something which means "whatever the inner SVG is", so as to avoid writing (or copy-pasting, rather) the viewBox each time you want to reference an icon?
To be honest, I think everyone would intuitively kind of expect this to work like regular embedded SVGs since the viewBox is already set once on the symbol that is being referenced.
I'd highly recommend:
Make all your icons have a consistent viewBox. For example, "0 0 24 24" is a common one that many icon libraries use. That way you don't have to find and copy the correct viewBox where you need it. It's always "0 0 24 24".
Add a class to the referencing <svg> that you can use for setting the icon width.
<svg class="icon lock" viewBox="0 0 24 24">
<use href="#lock"></use>
</svg>
Then in your CSS:
.icon {
// as above
}
.icon.lock {
width: 45px;
height: 50px;
}
.icon.something-else {
width: 35px;
height: 50px;
}
As long as your icon is horizontally centred in its viewBox, everything will work.
Default size (square) icons need no extra CSS. You only need to add a CSS rule for the non-square ones.
If you're not opposed to using some JavaScript, the following should work. Load it once, no matter how many icons you have on your page.
document.querySelectorAll(".icon").forEach(node => {
const href = node.querySelector("use").href.baseVal;
const icon = document.querySelector(href);
const vb = icon.viewBox.baseVal;
node.setAttribute("viewBox", `${vb.x} ${vb.y} ${vb.width} ${vb.height}`);
});
.icon {
height: 50px;
width: auto;
/* Aesthetics: */
background-color: gray;
border-radius: 5px;
}
<svg style="display: none;">
<symbol id="lock" viewBox="0 0 22.832 27.398">
<g transform="translate(-42.667)">
<g transform="translate(42.667)">
<path
class="a"
d="M62.074,9.133V7.991a7.991,7.991,0,1,0-15.982,0V9.133
a3.429,3.429,0,0,0-3.425,3.425V23.973A3.429,3.429,0,0,0,46.092,27.4
H62.074A3.429,3.429,0,0,0,65.5,23.973V12.557
A3.429,3.429,0,0,0,62.074,9.133Z
m-13.7-1.142a5.708,5.708,0,0,1,11.416,0V9.133H48.375Z
M63.216,23.973a1.143,1.143,0,0,1-1.142,1.142H46.092
a1.143,1.143,0,0,1-1.142-1.142V12.557a1.143,1.143,0,0,1,1.142-1.142
H62.074a1.143,1.143,0,0,1,1.142,1.142Z"
transform="translate(-42.667)">
</path>
</g>
<g transform="translate(50.658 13.128)">
<path
class="a"
d="M195.425,245.333a3.416,3.416,0,0,0-1.142,6.639v1.922
a1.142,1.142,0,1,0,2.283,0v-1.922a3.416,3.416,0,0,0-1.142-6.639Z
m0,4.566a1.142,1.142,0,1,1,1.142-1.142
A1.143,1.143,0,0,1,195.425,249.9Z"
transform="translate(-192 -245.333)">
</path>
</g>
</g>
</symbol>
</svg>
<svg class="icon">
<use href="#lock"></use>
</svg>
If you want to add icons dynamically - after page load, the following would also be an improvement over adding a manual viewBox:
function iconLoaded(event) {
const node = event.target;
const href = node.querySelector("use").href.baseVal;
const icon = document.querySelector(href);
const vb = icon.viewBox.baseVal;
node.setAttribute("viewBox", `${vb.x} ${vb.y} ${vb.width} ${vb.height}`);
}
.icon {
height: 50px;
width: auto;
/* Aesthetics: */
background-color: gray;
border-radius: 5px;
}
<svg style="display: none;">
<symbol id="lock" viewBox="0 0 22.832 27.398">
<g transform="translate(-42.667)">
<g transform="translate(42.667)">
<path
class="a"
d="M62.074,9.133V7.991a7.991,7.991,0,1,0-15.982,0V9.133
a3.429,3.429,0,0,0-3.425,3.425V23.973A3.429,3.429,0,0,0,46.092,27.4
H62.074A3.429,3.429,0,0,0,65.5,23.973V12.557
A3.429,3.429,0,0,0,62.074,9.133Z
m-13.7-1.142a5.708,5.708,0,0,1,11.416,0V9.133H48.375Z
M63.216,23.973a1.143,1.143,0,0,1-1.142,1.142H46.092
a1.143,1.143,0,0,1-1.142-1.142V12.557a1.143,1.143,0,0,1,1.142-1.142
H62.074a1.143,1.143,0,0,1,1.142,1.142Z"
transform="translate(-42.667)">
</path>
</g>
<g transform="translate(50.658 13.128)">
<path
class="a"
d="M195.425,245.333a3.416,3.416,0,0,0-1.142,6.639v1.922
a1.142,1.142,0,1,0,2.283,0v-1.922a3.416,3.416,0,0,0-1.142-6.639Z
m0,4.566a1.142,1.142,0,1,1,1.142-1.142
A1.143,1.143,0,0,1,195.425,249.9Z"
transform="translate(-192 -245.333)">
</path>
</g>
</g>
</symbol>
</svg>
<svg class="icon" onload="iconLoaded(event)">
<use href="#lock"></use>
</svg>
SVG changes the size of its container (expands it). How to prevent it?
I put SVG picture in some block and the block has expanded
I've tried to change svg attributes but then I get different looks of the image - outline path gets thicker
Html code
<section class="image item item2 cat_image">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 640 800" width="640pt" height="800pt"><defs>
<path...></g>
</svg>
</section>
CSScode
svg {
transform: scale(0.45);
transform-origin: bottom;
}
I want the width of the block be the same as svg picture.
UPDATE:
Also if I set width to the block to make it compact then the image shrinks as well
Paulie_D's suggestion of using display: inline-block should be the correct solution.
That's what I've used in the following example, and it works okay.
section {
display: inline-block;
background: linen;
}
.smaller {
width: 300px;
height: 400px;
overflow: hidden;
}
<section>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 640 800" width="640pt" height="800pt">
<ellipse cx="320" cy="400" rx="320" ry="400" fill="rebeccapurple"/>
</svg>
</section>
<p/>
<section class="smaller">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 640 800" width="640pt" height="800pt">
<ellipse cx="320" cy="400" rx="320" ry="400" fill="rebeccapurple"/>
</svg>
</section>
<style>
div.outer{
background:red;
width:200px;
}
</style>
<div class="outer">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" height="100pt">
<path d="M50,40 l100,0 0,50 -100,0 0,-50"
style="stroke: #000000; fill:green;" />
</svg>
</div>
wavy button shape with text inside
I'm trying to create this button:
I'm doing this with SVG, so here is my code:
.svg-button {
position:relative;
}
a.test {
display:block;
}
<div class="svg-button">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="150px" height="51px" viewBox="0 0 150 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-HD" transform="translate(-987.000000, -779.000000)" stroke="#102CCA">
<g id="Group-6" transform="translate(836.000000, 668.000000)">
<g id="Group" transform="translate(151.000000, 111.000000)">
<path d="M0.5,0.5 L0.5,47.4475413 C38.7946588,43.6370428 73.268313,43.6553687 103.92161,47.5038947 C134.273898,51.314629 149.5,49.8747765 149.5,43.6367187 L149.5,30.078125 C149.5,19.2695184 149.5,19.0898429 149.5,0.936176488 L0.5,0.5 Z" id="Rectangle"></path>
</g>
</g>
</g>
</g>
</svg>
<a class="test" href="#">add to cart</a>
</div>
Any ideas on how I might integrate the text inside the shape and add a hover state for the shape/button?
Thanks!
There are a number of ways you could do it.
You could move the text into the SVG using a <text> element...
a.test:hover svg path {
fill: red;
}
<div class="svg-button">
<a class="test" href="#">
<svg width="150px" height="51px" viewBox="0 0 150 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-HD" transform="translate(-987.000000, -779.000000)" stroke="#102CCA">
<g id="Group-6" transform="translate(836.000000, 668.000000)">
<g id="Group" transform="translate(151.000000, 111.000000)">
<path d="M0.5,0.5 L0.5,47.4475413 C38.7946588,43.6370428 73.268313,43.6553687 103.92161,47.5038947 C134.273898,51.314629 149.5,49.8747765 149.5,43.6367187 L149.5,30.078125 C149.5,19.2695184 149.5,19.0898429 149.5,0.936176488 L0.5,0.5 Z" id="Rectangle"></path>
</g>
</g>
</g>
</g>
<text x="75" y="27" text-anchor="middle">add to cart</text>
</svg>
</a>
</div>
Or if you wanted to keep the text as HTML. You could use relative/absolute positioning to centre the text over the SVG.
.svg-button {
position: relative;
}
.svg-button svg,
.svg-button a {
position: absolute;
display: block;
width: 150px;
height: 51px;
top: 0;
}
.svg-button a {
text-align: center;
line-height: 45px;
}
.svg-button:hover svg path {
fill: red;
}
<div class="svg-button">
<svg width="150px" height="51px" viewBox="0 0 150 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop-HD" transform="translate(-987.000000, -779.000000)" stroke="#102CCA">
<g id="Group-6" transform="translate(836.000000, 668.000000)">
<g id="Group" transform="translate(151.000000, 111.000000)">
<path d="M0.5,0.5 L0.5,47.4475413 C38.7946588,43.6370428 73.268313,43.6553687 103.92161,47.5038947 C134.273898,51.314629 149.5,49.8747765 149.5,43.6367187 L149.5,30.078125 C149.5,19.2695184 149.5,19.0898429 149.5,0.936176488 L0.5,0.5 Z" id="Rectangle"></path>
</g>
</g>
</g>
</g>
</svg>
<a class="test" href="#">add to cart</a>
</div>
I'd recommend grouping the svg path and the text 'add to cart' inside of the svg (with a "g" element). I'm also guessing that you want this whole button to act as the link, so I'd recommend structuring the HTML like the following:
<a>
<svg>
<g>
<path></path>
<text>Add to cart</text>
</g>
</svg>
</a>
...and positioning the path and the text inside of the group with x and y values. You can then target the path and the text, when the whole link is being hovered on like this:
a:hover svg g text {
fill: red;
}
a:hover svg g path {
stroke: red;
}
Check out this simple codepen I made for a demo and let me know if you have any questions! https://codepen.io/segheysens/pen/VzbzeJ
horizontal center svg path in svg include into div container
Can you help me to understand why my path refuse to horizontally center into svg container or into div.
Ok if I try to align horizontally JUST the path without rect svg I can do that if svg container is 100% width. But if I want to add rect and just work into div width and height static, I never find solution for path center.
html :
<div id="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1200 1200">
<rect id="background" width="100%" height="100%" fill="grey"/>
<path id="path" xmlns="http://www.w3.org/2000/svg"
d="M 201.68015,653.12212 C 189.21313,655.67886 177.65942,662.51955 166.63177,673.41648 C 155.59034,684.51344 91 L 310.26302 176.06855,451.96604 z etc................ "
style="fill:#131516;fill-rule:evenodd;stroke:#131516;stroke-width:0.60229105" />
</svg>
</div>
And css :
#svg-container
{
height: 250px;
width: 250px;
}
#path
{
display: block;
position: relative;
left: 30%;
}
JSFiddle : https://jsfiddle.net/170jkfLr/2/#&togetherjs=w9w2vhjhEJ
Do this, example (twitter icon into the mid): <center> <div style="width: 40px; height: 40px;"> <svg class="sqs-svg-icon--social" viewBox="0 0 64 64"> <use class="sqs-use--icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-icon"> <svg id="twitter-icon" viewBox="0 0 64 64" width="100%" height="100%"> <path d="M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z" /> </svg> </use> </svg> </div> </center>