Background color of an svg - html

I need to change the INSIDE background color of a heart-shaped svg but with normal background it overflows and with fill it changes the border not the inside, any tips on how i might achive what i am looking for?
.heart {
width: 50%;
margin-left: 25%;
cursor: pointer;
}
.heart:active {
background-color: red;
overflow: hidden;
}
<svg class="heart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 471.701 471.701" style="enable-background:new 0 0 471.701 471.701;" xml:space="preserve">
<g>
<path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1 c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3 l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4 C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3 s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4 c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3 C444.801,187.101,434.001,213.101,414.401,232.701z"/>
</g>
</svg>


Issues & Solutions
svg's path is an outline only
apply fill to the path instead of svg
.heart {
width: 50%;
margin-left: 25%;
cursor: pointer;
}
.heart:active path {
fill: red;
overflow: hidden;
}
<svg class="heart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 471.701 471.701" style="enable-background:new 0 0 471.701 471.701;" xml:space="preserve">
<path d="m433.601,68.66767c-24.7,-24.7 -57.4,-38.2 -92.3,-38.2s-67.7,13.6 -92.4,38.3l-12.9,12.9l-13.1,-13.1c-24.7,-24.7 -57.6,-38.4 -92.5,-38.4c-34.8,0 -67.6,13.6 -92.2,38.2c-24.7,24.7 -38.3,57.5 -38.2,92.4c0,34.9 13.7,67.6 38.4,92.3l187.8,187.8c2.6,2.6 6.1,4 9.5,4c3.4,0 6.9,-1.3 9.5,-3.9l188.2,-187.5c24.7,-24.7 38.3,-57.5 38.3,-92.4c0.1,-34.9 -13.4,-67.7 -38.1,-92.4z" stroke="#000" fill="#fff"/>
</svg>

Related

Anchor hover with inline SVG and text

Not sure how to accomplish this, but I have an SVG inline with some text wrapper in an anchor tag. But the SVG isn't changing color when hovering over the anchor as a whole, just the text. Once you hover over the SVG, it will change color, but I'm wondering how get to to trigger the hover state as a whole.
CSS:
a, a svg {
color: #fff;
}
a:hover {
color: #111;
}
a svg:hover {
fill: #111;
}
HTML:
<a href="https://facebook.com/username" target="_blank">FACEBOOK
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<path d="M17.252,11.106V8.65c0-0.922,0.611-1.138,1.041-1.138h2.643V3.459l-3.639-0.015
c-4.041,0-4.961,3.023-4.961,4.961v2.701H10v4.178h2.336v11.823h4.916V15.284h3.316l0.428-4.178H17.252z"/>
</svg>
</a>
I could have swore I've had this working somewhere else before not sure why it wouldn't work here.

Give the path an attribute fill="currentColor", and it will inherit the fill color from its parents.
a {
color: #fff;
}
a:hover {
color: #111;
}
<a href="https://facebook.com/username" target="_blank">FACEBOOK
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<path fill="currentColor" d="M17.252,11.106V8.65c0-0.922,0.611-1.138,1.041-1.138h2.643V3.459l-3.639-0.015
c-4.041,0-4.961,3.023-4.961,4.961v2.701H10v4.178h2.336v11.823h4.916V15.284h3.316l0.428-4.178H17.252z"/>
</svg>
</a>

The fill color of your svg is showing by default #111 so you need to change the fill color of the svg normal state in your CSS. I don't know if you meant to have the text as white but you can obviously change that if you need to.
a, a svg {
color: #fff;
fill: #FF0000;
}
a:hover {
color: #111;
}
a:hover svg {
fill: #111;
}
<a href="https://facebook.com/username" target="_blank">FACEBOOK
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<path d="M17.252,11.106V8.65c0-0.922,0.611-1.138,1.041-1.138h2.643V3.459l-3.639-0.015
c-4.041,0-4.961,3.023-4.961,4.961v2.701H10v4.178h2.336v11.823h4.916V15.284h3.316l0.428-4.178H17.252z"/>
</svg>
</a>

Issue with Safari Position absolute on an image

I have an image as a background with an SVG play button overlaying it. It works fine in Chrome Firefox but when I look at it in Safari it does not work as it is expected to work like in Chrome
Does not work in Safari
.Testiomonials-Play{
position: absolute;
left: 170px;
top:50px;
background-color: Transparent;
width: 120px;
border:none;
height: 50px;
font-size: 10px;
}
<img class = "dexia"
src="https://www.blueface.com/wp-content/uploads/2018/03/dexia-320x220-
final.png" width = "320" height="220" />
<button class = "btn btn-primary Testiomonials-Play" > <svg width =
"50px" height = "120px" 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 452 472" style="enable-background:new 0 0 452 472;"
xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#00B6F1;}
</style>
<path class="st0" d="M223.7,456.8c115.6,0.9,214.4-92,215.6-212.3c1.2-122.8-94.7-213.1-204.9-217.9
C105.9,21.1,10.3,122.1,8.6,238.1C6.9,361.4,106.6,457.4,223.7,456.8z"/>
<path class="st1" d="M223.7,456.8C106.6,457.4,6.9,361.4,8.6,238.1c1.6-115.9,97.3-217,225.8-211.4
c110.2,4.7,206.1,95.1,204.9,217.9C438.1,364.7,339.3,457.7,223.7,456.8z M169,245.3c0,25.3-0.1,50.6,0,76
c0.1,12,7.7,16.4,17.8,10.5c43.4-25.4,86.8-50.8,130.1-76.3c9.8-5.8,9.6-14.7-0.2-20.5c-10.9-6.4-21.8-12.8-32.7-19.2
c-32.3-18.9-64.6-37.9-96.9-56.8c-9.9-5.8-17.5-1.6-18,9.8c-0.1,1.7,0,3.3,0,5C169,197.7,169,221.5,169,245.3z"/>
</svg>
</button>

Hope this helps you out. First of all remove inline styles from svg, and here i think you are missing a parent relative container in the above posted markup. Please check the updated snippet. Checked on browsers too.
.Testiomonials-Play{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
background-color: Transparent;
width: auto;
border:none;
height: auto;
}
svg {
width: 50px;
}
div {
position: relative;
display: inline-block;
}
<div>
<img class = "dexia"
src="https://www.blueface.com/wp-content/uploads/2018/03/dexia-320x220-
final.png" width = "320" height="220" />
<button class = "btn btn-primary Testiomonials-Play" > <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 452 472" style="enable-background:new 0 0 452 472;"
xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#00B6F1;}
</style>
<path class="st0" d="M223.7,456.8c115.6,0.9,214.4-92,215.6-212.3c1.2-122.8-94.7-213.1-204.9-217.9
C105.9,21.1,10.3,122.1,8.6,238.1C6.9,361.4,106.6,457.4,223.7,456.8z"/>
<path class="st1" d="M223.7,456.8C106.6,457.4,6.9,361.4,8.6,238.1c1.6-115.9,97.3-217,225.8-211.4
c110.2,4.7,206.1,95.1,204.9,217.9C438.1,364.7,339.3,457.7,223.7,456.8z M169,245.3c0,25.3-0.1,50.6,0,76
c0.1,12,7.7,16.4,17.8,10.5c43.4-25.4,86.8-50.8,130.1-76.3c9.8-5.8,9.6-14.7-0.2-20.5c-10.9-6.4-21.8-12.8-32.7-19.2
c-32.3-18.9-64.6-37.9-96.9-56.8c-9.9-5.8-17.5-1.6-18,9.8c-0.1,1.7,0,3.3,0,5C169,197.7,169,221.5,169,245.3z"/>
</svg>
</button>
</div>

SVG Fill Animation doesn't work on Firefox and Edge

I have a simple animation where an SVG fills on mouse over. It is working fine on Chrome, but I've found that it's doesn't workg on Firefox or Edge. I've tried few different approaches, but nothing seems to help. I'm new to SVG and I guess I'm missing something? What is the proper way to achieve what I'm trying to do? Here is the code:
svg#bogeLogo {
display: block;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
svg#bogeLogo #bogePath {
fill: transparent;
stroke: red;
stroke-width: 8;
}
svg#bogeLogo #bogeFinal {
fill: blue;
}
svg#bogeLogo #bogeClip rect {
transition: all 1.4s ease-out !important;
width: 0;
}
svg#bogeLogo:hover #bogeClip rect {
width: 100%;
}
<svg id="bogeLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 2551.2 2551.2" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<defs>
<path id="bogePath" d="M1263.5,1239.5l0-1l0.8-1194.9l-60.3,0l-0.6,1195.9l-1146.6,0.2v60.3l1146.6-0.5v1195h59l1-1195 l1231.9,0.5l0-60.3L1263.5,1239.5z M779.6,1037c98.3-37.9,134.5-130.5,138.1-140c6.8-18.3,31.3-87,1.9-161.1 c-20.6-52-58.4-82.8-74.8-95.9c-23.2-18.5-45.4-27.8-61.3-34.5c13.2-6.5,52.6-26.9,76.7-90.2c26-68.5-0.8-128.3-7.7-143.8 c-25.5-57.3-74.1-84.5-95-96.9c-31.8-19-83.7-25.5-104.2-26.3L410.2,248v3.2l-1.1,800.3v1.1l293.7-0.2 C721.3,1051.7,748.9,1048.8,779.6,1037z M570.6,394.5c46.8-9.2,80.5-1.6,97.8,3.8c19.2,6.1,27.6,12.5,32.6,17.3 c22.3,21.1,22.8,51.6,23,61.4c0.2,9.5,0.7,37.9-19.2,61.4c-18.5,21.9-43.5,28.8-65.2,30.7c-31.6,2.7-51.9,2.2-69-1.9V394.5z M570.6,908.5V701.4c33.3-3.2,60.9-2.9,80.5-1.9c39.3,2,59.3,3.2,80.5,15.3c7,4,29.8,17.4,44.1,46c5.2,10.5,15.6,35.6,9.6,67.1 c-2.2,11.7-9.7,39.6-34.5,59.5c-11,8.7-25.4,16-63.3,21.1C660.3,912.2,620.2,914.9,570.6,908.5z M1835.5,1052.5 c218.7,0,395-184.3,395-403s-177.3-407-396-407s-396,188.3-396,407S1616.8,1052.5,1835.5,1052.5z M1835,390.5 c131.3,0,237.8,116.2,237.8,259.5S1966.3,909.5,1835,909.5S1597.2,793.3,1597.2,650S1703.7,390.5,1835,390.5z M636.5,1879.5v1l1,129 v0.1c73,0.1,142.9,0.3,216,0.4c-5.4,14.1-15,34.1-31.6,54.7c-5.9,7.2-35.7,43.1-89.4,63.7c-58.3,22.4-109.4,13.3-136.9,8.1 c-54.1-10.3-90.3-33.6-98.9-39.3c-39-25.9-60.5-55.8-71.8-71.8c-14.1-20-35.1-50.4-44.7-96.2c-2.4-11.6-10.4-54.2,2.7-107.1 c3.5-14.3,14.4-52.5,44.7-92.2c9.3-12.2,39.6-49.6,93.5-75.9c15.2-7.4,47.4-21.4,90.8-25.7c7.7-0.8,40-3.7,81.3,4.1 c19.2,3.6,46.7,9,77.2,25.7c14.7,8,31,19.8,63.7,43.4c8.8,6.3,15.7,12.5,20.5,16l90-106c-15.9-18.7-35.7-40.2-71-63 c-54-35-103.7-45.6-141.8-53.3c-31.3-6.3-86.6-17-158.1-6.3c-59.3,8.9-105.3,28.7-134.6,44.3c-49.5,26.2-82,56.1-95.8,69.6 c-39.5,38.6-60.6,75.2-65,83.1c-4.7,8.2-27.1,48.6-39.8,107.5c-2.3,10.9-9.1,44.7-9,89.4c0,22.3,0.4,59.9,13.6,106.6 c10.1,35.8,23.2,61,32.5,78.6c11,20.9,29,54.4,62.3,90.3c39,42.1,79.9,66.8,106.6,80.4c46.4,23.6,85.8,31.6,109.3,36.1 c25.3,4.9,72.3,11.8,131,6.3c27.9-2.6,61.2-6,102.1-21.7c14.8-5.7,58.3-23.6,103-63.2c42.8-37.9,65.1-76.5,79.5-102.1 c12.4-21.9,31.2-55.8,42.5-104.8c10.8-46.8,9.9-87,7.3-113.9L636.5,1879.5z M1019,1874.6c0,0.3,0.1,0.6,0.1,0.9l1.4,0L1019,1874.6z M1753.3,1919.6l291.8,1.1v-1.1l-1.1-142.2l-285.5,1.1h-1.1l1-137.9h1l304.6-3.3h1.1v-151.7h-464.6v2.1l-0.5,794l0,0.4h470.4v-146.4 h-317.1V1919.6z"/>
<clipPath id="bogeClip">
<rect x="0" y="0" height="100%" width="100%"/>
</clipPath>
</defs>
<use xlink:href="#bogePath"/>
<path id="bogeFinal" clip-path="url(#bogeClip)" d="M1263.5,1239.5l0-1l0.8-1194.9l-60.3,0l-0.6,1195.9l-1146.6,0.2v60.3l1146.6-0.5v1195h59l1-1195 l1231.9,0.5l0-60.3L1263.5,1239.5z M779.6,1037c98.3-37.9,134.5-130.5,138.1-140c6.8-18.3,31.3-87,1.9-161.1 c-20.6-52-58.4-82.8-74.8-95.9c-23.2-18.5-45.4-27.8-61.3-34.5c13.2-6.5,52.6-26.9,76.7-90.2c26-68.5-0.8-128.3-7.7-143.8 c-25.5-57.3-74.1-84.5-95-96.9c-31.8-19-83.7-25.5-104.2-26.3L410.2,248v3.2l-1.1,800.3v1.1l293.7-0.2 C721.3,1051.7,748.9,1048.8,779.6,1037z M570.6,394.5c46.8-9.2,80.5-1.6,97.8,3.8c19.2,6.1,27.6,12.5,32.6,17.3 c22.3,21.1,22.8,51.6,23,61.4c0.2,9.5,0.7,37.9-19.2,61.4c-18.5,21.9-43.5,28.8-65.2,30.7c-31.6,2.7-51.9,2.2-69-1.9V394.5z M570.6,908.5V701.4c33.3-3.2,60.9-2.9,80.5-1.9c39.3,2,59.3,3.2,80.5,15.3c7,4,29.8,17.4,44.1,46c5.2,10.5,15.6,35.6,9.6,67.1 c-2.2,11.7-9.7,39.6-34.5,59.5c-11,8.7-25.4,16-63.3,21.1C660.3,912.2,620.2,914.9,570.6,908.5z M1835.5,1052.5 c218.7,0,395-184.3,395-403s-177.3-407-396-407s-396,188.3-396,407S1616.8,1052.5,1835.5,1052.5z M1835,390.5 c131.3,0,237.8,116.2,237.8,259.5S1966.3,909.5,1835,909.5S1597.2,793.3,1597.2,650S1703.7,390.5,1835,390.5z M636.5,1879.5v1l1,129 v0.1c73,0.1,142.9,0.3,216,0.4c-5.4,14.1-15,34.1-31.6,54.7c-5.9,7.2-35.7,43.1-89.4,63.7c-58.3,22.4-109.4,13.3-136.9,8.1 c-54.1-10.3-90.3-33.6-98.9-39.3c-39-25.9-60.5-55.8-71.8-71.8c-14.1-20-35.1-50.4-44.7-96.2c-2.4-11.6-10.4-54.2,2.7-107.1 c3.5-14.3,14.4-52.5,44.7-92.2c9.3-12.2,39.6-49.6,93.5-75.9c15.2-7.4,47.4-21.4,90.8-25.7c7.7-0.8,40-3.7,81.3,4.1 c19.2,3.6,46.7,9,77.2,25.7c14.7,8,31,19.8,63.7,43.4c8.8,6.3,15.7,12.5,20.5,16l90-106c-15.9-18.7-35.7-40.2-71-63 c-54-35-103.7-45.6-141.8-53.3c-31.3-6.3-86.6-17-158.1-6.3c-59.3,8.9-105.3,28.7-134.6,44.3c-49.5,26.2-82,56.1-95.8,69.6 c-39.5,38.6-60.6,75.2-65,83.1c-4.7,8.2-27.1,48.6-39.8,107.5c-2.3,10.9-9.1,44.7-9,89.4c0,22.3,0.4,59.9,13.6,106.6 c10.1,35.8,23.2,61,32.5,78.6c11,20.9,29,54.4,62.3,90.3c39,42.1,79.9,66.8,106.6,80.4c46.4,23.6,85.8,31.6,109.3,36.1 c25.3,4.9,72.3,11.8,131,6.3c27.9-2.6,61.2-6,102.1-21.7c14.8-5.7,58.3-23.6,103-63.2c42.8-37.9,65.1-76.5,79.5-102.1 c12.4-21.9,31.2-55.8,42.5-104.8c10.8-46.8,9.9-87,7.3-113.9L636.5,1879.5z M1019,1874.6c0,0.3,0.1,0.6,0.1,0.9l1.4,0L1019,1874.6z M1753.3,1919.6l291.8,1.1v-1.1l-1.1-142.2l-285.5,1.1h-1.1l1-137.9h1l304.6-3.3h1.1v-151.7h-464.6v2.1l-0.5,794l0,0.4h470.4v-146.4 h-317.1V1919.6z"></path>
</svg>

Modifying geometric attributes, such as width, is a new thing in SVG 2. Only Chrome has implemented that so far.
You will need to use a different method to animate your <rect>. For example, you could move it horizontally using a transform, instead of changing its width.
Update
It looks like there is a bug in Firefox at the moment, causing CSS selectors to not match elements in the <defs> section.
The solution is to use the logo as the clippath, and move a blue rectangle in and out instead.
svg#bogeLogo {
display: block;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
#bogePath {
fill: transparent;
stroke: red;
stroke-width: 8;
}
svg#bogeLogo #bogeFinal {
fill: blue;
transition: all 1.4s ease-out !important;
transform: translateX(-2552px);
}
svg#bogeLogo:hover #bogeFinal {
transform: translateX(0px);
}
<svg id="bogeLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 2551.2 2551.2" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<defs>
<path id="bogePath" d="M1263.5,1239.5l0-1l0.8-1194.9l-60.3,0l-0.6,1195.9l-1146.6,0.2v60.3l1146.6-0.5v1195h59l1-1195 l1231.9,0.5l0-60.3L1263.5,1239.5z M779.6,1037c98.3-37.9,134.5-130.5,138.1-140c6.8-18.3,31.3-87,1.9-161.1 c-20.6-52-58.4-82.8-74.8-95.9c-23.2-18.5-45.4-27.8-61.3-34.5c13.2-6.5,52.6-26.9,76.7-90.2c26-68.5-0.8-128.3-7.7-143.8 c-25.5-57.3-74.1-84.5-95-96.9c-31.8-19-83.7-25.5-104.2-26.3L410.2,248v3.2l-1.1,800.3v1.1l293.7-0.2 C721.3,1051.7,748.9,1048.8,779.6,1037z M570.6,394.5c46.8-9.2,80.5-1.6,97.8,3.8c19.2,6.1,27.6,12.5,32.6,17.3 c22.3,21.1,22.8,51.6,23,61.4c0.2,9.5,0.7,37.9-19.2,61.4c-18.5,21.9-43.5,28.8-65.2,30.7c-31.6,2.7-51.9,2.2-69-1.9V394.5z M570.6,908.5V701.4c33.3-3.2,60.9-2.9,80.5-1.9c39.3,2,59.3,3.2,80.5,15.3c7,4,29.8,17.4,44.1,46c5.2,10.5,15.6,35.6,9.6,67.1 c-2.2,11.7-9.7,39.6-34.5,59.5c-11,8.7-25.4,16-63.3,21.1C660.3,912.2,620.2,914.9,570.6,908.5z M1835.5,1052.5 c218.7,0,395-184.3,395-403s-177.3-407-396-407s-396,188.3-396,407S1616.8,1052.5,1835.5,1052.5z M1835,390.5 c131.3,0,237.8,116.2,237.8,259.5S1966.3,909.5,1835,909.5S1597.2,793.3,1597.2,650S1703.7,390.5,1835,390.5z M636.5,1879.5v1l1,129 v0.1c73,0.1,142.9,0.3,216,0.4c-5.4,14.1-15,34.1-31.6,54.7c-5.9,7.2-35.7,43.1-89.4,63.7c-58.3,22.4-109.4,13.3-136.9,8.1 c-54.1-10.3-90.3-33.6-98.9-39.3c-39-25.9-60.5-55.8-71.8-71.8c-14.1-20-35.1-50.4-44.7-96.2c-2.4-11.6-10.4-54.2,2.7-107.1 c3.5-14.3,14.4-52.5,44.7-92.2c9.3-12.2,39.6-49.6,93.5-75.9c15.2-7.4,47.4-21.4,90.8-25.7c7.7-0.8,40-3.7,81.3,4.1 c19.2,3.6,46.7,9,77.2,25.7c14.7,8,31,19.8,63.7,43.4c8.8,6.3,15.7,12.5,20.5,16l90-106c-15.9-18.7-35.7-40.2-71-63 c-54-35-103.7-45.6-141.8-53.3c-31.3-6.3-86.6-17-158.1-6.3c-59.3,8.9-105.3,28.7-134.6,44.3c-49.5,26.2-82,56.1-95.8,69.6 c-39.5,38.6-60.6,75.2-65,83.1c-4.7,8.2-27.1,48.6-39.8,107.5c-2.3,10.9-9.1,44.7-9,89.4c0,22.3,0.4,59.9,13.6,106.6 c10.1,35.8,23.2,61,32.5,78.6c11,20.9,29,54.4,62.3,90.3c39,42.1,79.9,66.8,106.6,80.4c46.4,23.6,85.8,31.6,109.3,36.1 c25.3,4.9,72.3,11.8,131,6.3c27.9-2.6,61.2-6,102.1-21.7c14.8-5.7,58.3-23.6,103-63.2c42.8-37.9,65.1-76.5,79.5-102.1 c12.4-21.9,31.2-55.8,42.5-104.8c10.8-46.8,9.9-87,7.3-113.9L636.5,1879.5z M1019,1874.6c0,0.3,0.1,0.6,0.1,0.9l1.4,0L1019,1874.6z M1753.3,1919.6l291.8,1.1v-1.1l-1.1-142.2l-285.5,1.1h-1.1l1-137.9h1l304.6-3.3h1.1v-151.7h-464.6v2.1l-0.5,794l0,0.4h470.4v-146.4 h-317.1V1919.6z"/>
<clipPath id="bogeClip">
<use xlink:href="#bogePath"/>
</clipPath>
</defs>
<use xlink:href="#bogePath"/>
<g clip-path="url(#bogeClip)">
<rect id="bogeFinal" x="0" y="0" height="100%" width="100%"/>
</g>
</svg>

Scale SVG image- viewbox

I have svg triangle which I put on top of section:
position: relative;
top: 0;
left: 0;
My svg:
<svg version="1.1" class="triangle_top" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="480px" height="155.5px" viewBox="0 0 480 155.5" style="enable-background:new 0 0 480 155.5;" xml:space="preserve">
<g>
<polygon style="fill:#fd7013;" points="480,155.5 0.5,70.9 0.5,0.3 324.2,0.3 "/>
</g>
<rect x="35.7" y="21.5" style="fill:none;" width="289.1" height="28.2"/>
<text transform="matrix(1 0 0 1 35.7373 46.6423)" style="fill:#fff; font-family:'Lato'; font-size:33.8486; font-weight: bold;">title</text>
</svg>
When screen is smaller than <450 px I change width (media queries) to:
width: 100%;
But my svg is not on top: 0 :(
Screen: http://prntscr.com/aa27iy
How to make my svg responsive and ever on top: 0 ?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prueba</title>
<style>
#section{
background-color: #fc7013;
position: relative;
height: 500px;
padding: 80px 0px;
}
svg{
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<section id="section">
<svg version="1.1" class="triangle_top" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="480px" height="155.5px" viewBox="0 0 480 155.5" style="enable-background:new 0 0 480 155.5;" xml:space="preserve">
<g>
<polygon style="fill:#fff;" points="480,155.5 0.5,70.9 0.5,0.3 324.2,0.3 "/>
</g>
<rect x="35.7" y="21.5" style="fill:none;" width="289.1" height="28.2"/>
<text transform="matrix(1 0 0 1 35.7373 46.6423)" style="fill:#fd7013; font-family:'Lato'; font-size:33.8486; font-weight: bold;">#exampletext</text>
</svg>
<H1>TITLE</H1>
</section>
</body>
</html>
Look, so to me works

class svg :hover css fill not working correctly [duplicate]

This question already has answers here:
How to modify the fill color of an SVG image when being served as background image?
(24 answers)
Closed 7 years ago.
How can I cause this svg to fill when I hover? I looked at a fair amount of documentation and tried several ways but was unsuccessfully.
Here is my html:
<a class="anchor-class" href="#"><svg class="svg-class"></svg></a>
And i have tried the following in my css
a svg:hover {
fill: #50c8e8;
}
as well as
.anchor-class svg:hover{
fill: #50c8e8;
}
and even
.svg-class :hover{
fill:#50c8e8;
}
What am I doing wrong? I should be able to accomplish this with css, right?
EDIT: It might help to note that this image is being used as a background image. a little more detail in the css below:
.svg-class {
background-repeat: no-repeat;
background-size: 20px 20px;
height: 20px;
width: 20px;
display: inline-block;
.background-image('path.svg')
}
EDIT 2: Here is the .svg code, not sure that it is important though
<?xml version="1.0" encoding="utf-8"?>
<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 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:#E4E4E4;}
</style>
<path id="XMLID_154_" class="st0" d="M85.5,15c-19.5-19.4-51-19.4-70.4,0c-19.5,19.4-19.5,51,0,70.4c19.5,19.5,51,19.4,70.4,0
C105,66,105,34.4,85.5,15z M49.5,9c5.3,0,9.5,4.3,9.5,9.5c0,5.3-4.3,9.6-9.5,9.6c-5.3,0-9.6-4.3-9.6-9.6C39.9,13.2,44.1,9,49.5,9z
M64.8,79.1c0,2-1,3-3,3H37.3c-2,0-3-1-3-3v-6.3c0-2,1-3,3-3h4.5V43.4h-4.6c-2,0-3-1-3-3v-6.3c0-2,1-3,3-3h17.2c2,0,3,1,3,3v35.7
h4.6c2,0,3,1,3,3V79.1z"/>
</svg>

UPDATE: with the svg code that you posted, you can do this behavior in this way.
Example:
a .svg-class:hover path {
fill: #50c8e8;
}
.svg-class {
height: 20px;
width: 20px;
display: inline-block;
}
<a class="anchor-class" href="#">
<svg class="svg-class" 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 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:#E4E4E4;}
</style>
<path id="XMLID_154_" class="st0" d="M85.5,15c-19.5-19.4-51-19.4-70.4,0c-19.5,19.4-19.5,51,0,70.4c19.5,19.5,51,19.4,70.4,0
C105,66,105,34.4,85.5,15z M49.5,9c5.3,0,9.5,4.3,9.5,9.5c0,5.3-4.3,9.6-9.5,9.6c-5.3,0-9.6-4.3-9.6-9.6C39.9,13.2,44.1,9,49.5,9z
M64.8,79.1c0,2-1,3-3,3H37.3c-2,0-3-1-3-3v-6.3c0-2,1-3,3-3h4.5V43.4h-4.6c-2,0-3-1-3-3v-6.3c0-2,1-3,3-3h17.2c2,0,3,1,3,3v35.7
h4.6c2,0,3,1,3,3V79.1z"/>
</svg>
</a>