Scale SVG image- viewbox - html

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

Related

Image clipped by svg is cropped

Img bannt has its original dimensions - 1920 x 540
I need to clip it using svg and it works but about 50 px in both dimensions of the image - are missing
Seems like the image is cropped, not resized
I created the svg file using CorelDraw - if matters
any help ?
.wrapt {
position: relative;
}
.bannt {
display: block;
width: 100%;
margin: 0 auto;
clip-path: url(#cp1);
}
.svg_01 {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
<div class='wrapt'>
<svg class="svg_01" xml:space="preserve" width="1920px" height="540px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 1770.365 497.915">
<defs>
<clipPath id="cp1">
<path class="fil0" d="M0 0l1770.365 0 0 497.915c-73.766,0 -147.531,-27.662 -221.296,-27.662 -73.765,0 -147.53,27.662 -221.296,27.662 -73.765,0 -147.53,-27.662 -221.295,-27.662 -73.765,0 -147.53,27.662 -221.296,27.662 -73.765,0 -147.53,-27.662 -221.295,-27.662 -73.54,0 -147.079,27.49 -220.619,27.658 25.494,-29.84 30.119,-61.425 -0.516,-76.499 -69.556,-34.225 -40.441,-137.117 -168.281,-144.344 -127.841,-7.226 -197.109,67.562 -186.722,153.564 2.515,20.822 7.328,38.886 14.915,54.45l-102.664 12.833 0 -497.915z"/>
</clipPath>
</defs>
</svg>
<img class='bannt' src='bannt/plain_01.jpg' alt='img'>
</div>

The clip path in CSS needs to either fit the image size exactly or be scaled so that it fits.
I will suggest to insert the image into the SVG. When you set the viewBox of the SVG to the size of the clip path, the clip path will fit the inner "coordinate system" of the SVG. If you give the image the same width, it also scales to the size of the SVG.
The "outer size" of the SVG is default 100%. This can be controlled using CSS. It will probably be a good idea to use display block on the SVG.
svg {
display: block;
}
<svg viewBox="0 0 1770 500">
<defs>
<clipPath id="cp1">
<path d="M0 0l1770.365 0 0 497.915c-73.766,0 -147.531,-27.662 -221.296,-27.662 -73.765,0 -147.53,27.662 -221.296,27.662 -73.765,0 -147.53,-27.662 -221.295,-27.662 -73.765,0 -147.53,27.662 -221.296,27.662 -73.765,0 -147.53,-27.662 -221.295,-27.662 -73.54,0 -147.079,27.49 -220.619,27.658 25.494,-29.84 30.119,-61.425 -0.516,-76.499 -69.556,-34.225 -40.441,-137.117 -168.281,-144.344 -127.841,-7.226 -197.109,67.562 -186.722,153.564 2.515,20.822 7.328,38.886 14.915,54.45l-102.664 12.833 0 -497.915z"/>
</clipPath>
</defs>
<image width="1770" href="https://via.placeholder.com/1920x540" clip-path="url(#cp1)" />
</svg>

As commented: clip-path is not responsive
.wrapt {
position: relative;
}
.bannt {
display: block;
width: 100%;
height: auto;
clip-path: url(#cp1);
border: 1px solid red;
}
.clipped {
width: 100%;
-webkit-clip-path: url(#my-clip-path);
clip-path: url(#my-clip-path);
}
<div class='wrapt'>
<svg width="0" height="0" viewBox="0 0 1770.365 497.915">
<defs>
<clipPath id="cp1">
<path class="fil0" d="M0 0h1770.4v497.9c-73.8 0-147.6-27.6-221.3-27.6s-147.6 27.6-221.3 27.6s-147.6-27.6-221.3-27.6s-147.6 27.6-221.3 27.6s-147.5-27.6-221.3-27.6c-73.6 0-147.1 27.4-220.6 27.6c25.5-29.8 30.1-61.4-0.5-76.5c-69.6-34.2-40.5-137.1-168.3-144.3s-197.1 67.5-186.8 153.5c2.6 20.9 7.4 38.9 15 54.5l-102.7 12.8v-497.9z"/>
</clipPath>
<clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
<path d="M0,0 l1,0,0,1 c-0.042,0,-0.083,-0.056,-0.125,-0.056 c-0.042,0,-0.083,0.056,-0.125,0.056 c-0.042,0,-0.083,-0.056,-0.125,-0.056 c-0.042,0,-0.083,0.056,-0.125,0.056 c-0.042,0,-0.083,-0.056,-0.125,-0.056 c-0.042,0,-0.083,0.055,-0.125,0.056 c0.014,-0.06,0.017,-0.123,0,-0.154 c-0.039,-0.069,-0.023,-0.275,-0.095,-0.29 c-0.072,-0.015,-0.111,0.136,-0.105,0.308 c0.001,0.042,0.004,0.078,0.008,0.109 l-0.058,0.026,0,-1"></path>
</clipPath>
</defs>
</svg>
<img class='bannt' src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Crect x='0' y='0' width='100%' height='100%' fill='%23ccc' stroke='%23999' stroke-width='12' /%3E%3Ctext x='50%' y='50%' font-family='sans-serif' font-size='24' fill='%23999' dominant-baseline='middle' text-anchor='middle'%3E 240 %C3%97 240 %3C/text%3E%3C/svg%3E">
<img class='bannt --clipped' src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='540'%3E%3Crect x='0' y='0' width='100%' height='100%' fill='%23ccc' stroke='%23999' stroke-width='27' /%3E%3Ctext x='50%' y='50%' font-family='sans-serif' font-size='54' fill='%23999' dominant-baseline='middle' text-anchor='middle'%3E 1920 %C3%97 540 %3C/text%3E%3C/svg%3E">
</div>
For a responsive clip-path you need to optimize it
img{
max-width:100%;
}
.clipped {
width: 100%;
-webkit-clip-path: url(#my-clip-path);
clip-path: url(#my-clip-path);
}
.resize{
width: 50%;
height: auto;
padding:1em;
overflow:auto;
border:1px solid green;
resize:both;
}
<p>Clip path optimized with: https://yoksel.github.io/relative-clip-path/</p>
<p>Resize me</p>
<div class="resize">
<svg class="svg" width="0" height="0">
<clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
<path d="M0,0 l1,0,0,1 c-0.042,0,-0.083,-0.056,-0.125,-0.056 c-0.042,0,-0.083,0.056,-0.125,0.056 c-0.042,0,-0.083,-0.056,-0.125,-0.056 c-0.042,0,-0.083,0.056,-0.125,0.056 c-0.042,0,-0.083,-0.056,-0.125,-0.056 c-0.042,0,-0.083,0.055,-0.125,0.056 c0.014,-0.06,0.017,-0.123,0,-0.154 c-0.039,-0.069,-0.023,-0.275,-0.095,-0.29 c-0.072,-0.015,-0.111,0.136,-0.105,0.308 c0.001,0.042,0.004,0.078,0.008,0.109 l-0.058,0.026,0,-1"></path>
</clipPath>
</svg>
<img class='clipped' src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='540'%3E%3Crect x='0' y='0' width='100%' height='100%' fill='%23ccc' stroke='%23999' stroke-width='27' /%3E%3Ctext x='50%' y='50%' font-family='sans-serif' font-size='54' fill='%23999' dominant-baseline='middle' text-anchor='middle'%3E 1920 %C3%97 540 %3C/text%3E%3C/svg%3E" alt='img'>
</div>
Further reading: About clip-path caveats and pitfalls
Paul LeBeau's solution: "Complex SVG clip-path responsive"
Eric Meyer: Scaling SVG Clipping Paths for CSS Use
Css-tricks: Unfortunately, clip-path: path() is Still a No-Go
Css-tricks: Clipping and Masking in CSS
Clip path helper
Yoksel's clip-path generator

Background color of an svg

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>

how to style svg element that is duplicated from the <use /> element

I am using the svg <use /> element to duplicate an icon in multiple places:
<svg class="icon icon-BusinessUnit"><use xlink:href="#icon-BusinessUnit"></use></svg>
I would like to be able to control the size of the icon and the color but I do not know how.
Changing the fill, color, width and height of .icon-BusinessUnit does not change anything.
polygon,
rect {
fill: transparent;
stroke: #fff;
stroke-width: 1;
}
g path {
stroke: #fff;
stroke-opacity: 0.6;
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/* ==========================================
Single-colored icons can be modified like so:
.icon-name {
font-size: 32px;
color: red;
}
========================================== */
.icon-Activity {
width: 10.2001953125em;
}
.icon-BusinessUnit {
width: 1.2001953125em;
}
.icon-SublevelBusinessFunction {
width: 0.900390625em;
}
.icon-SublevelBusinessUnit {
width: 0.533203125em;
}
html {
font-size: 62.5%;
overflow-y: scroll;
position: relative;
min-height: 100%;
height: 100%;
}
body {
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
line-height: 1;
background: linear-gradient(#348dc5, #00435d);
}
*,
*:before,
*:after {
box-sizing: border-box !important;
}
ul {
padding: 0;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" href="/favicon.ico">
<title>D3</title>
<style type="text/css">
/* break points */
/* be consistent with spacing to avoid random pixel adding. */
</style>
</head>
<body cz-shortcut-listen="true">
<div id="root">
<div class="gel-wrap">
<div class="gel-layout">
<div class="gel-layout__item ">
<div style="display: inline-block; position: relative; width: 100%; vertical-align: top; overflow: hidden;"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1300 800"><g class="vx-group vx-cluster" transform="translate(100, 100)"><g class="vx-group" transform="translate(0, 0)"><g class="vx-group" transform="translate(490, 0)"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30"></polygon><svg class="icon icon-BusinessUnit"><use xlink:href="#icon-BusinessUnit"></use></svg></g>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://localhost:8088/static/js/main.js"></script>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-Activity">
<title>Activity</title>
<path fill="#fff" style="fill: var(--color1, #fff)" d="M0 26c0-3.314 2.686-6 6-6 0.176 0 0.352 0.010 0.524 0.024l6.45-10.75c-0.614-0.942-0.974-2.066-0.974-3.276 0-3.314 2.686-6 6-6s6 2.686 6 6c0 1.208-0.358 2.334-0.974 3.276l6.45 10.75c0.172-0.014 0.348-0.024 0.524-0.024 0.134 0 0.266 0.006 0.396 0.014l4.56 2.604c0.658 0.962 1.044 2.128 1.044 3.382 0 3.314-2.686 6-6 6s-6-2.686-6-6c0-1.208 0.358-2.334 0.974-3.276l-6.45-10.75c-0.172 0.014-0.348 0.024-0.524 0.024s-0.352-0.010-0.524-0.024l-6.45 10.75c0.614 0.942 0.974 2.066 0.974 3.274 0 3.314-2.686 6-6 6-3.314 0.002-6-2.684-6-5.998z"></path>
</symbol>
<symbol id="icon-BusinessUnit">
<title>Business Unit</title>
<path fill="#fff" style="fill: var(--color1, #fff)" d="M9.974 30.871h6.519v-6.666h3.918v6.666h6.519v-29.843h-16.955v29.843zM19.641 4.545h3.918v3.918h-3.918v-3.918zM19.641 10.842h3.918v3.918h-3.918v-3.918zM19.641 17.139h3.918v3.918h-3.918v-3.918zM13.344 4.545h3.918v3.918h-3.918v-3.918zM13.344 10.842h3.918v3.918h-3.918v-3.918zM13.344 17.139h3.918v3.918h-3.918v-3.918zM28.451 3.701h8.452v27.17h-5.935v-6.068h-2.517v-21.102zM33.835 21.936h-0v-3.567h-3.567v3.567h3.567zM33.835 16.203h-0v-3.567h-3.567v3.567h3.567zM33.835 10.47h-0v-3.567h-3.567v3.567h3.567zM0 30.871v-27.17h8.452v21.102h-2.517v6.068h-5.935zM3.068 6.903v3.567h3.567v-3.567h-3.567zM3.068 12.636v3.567h3.567v-3.567h-3.567zM3.068 18.369v3.567h3.567v-3.567h-3.567z"></path>
</symbol>
<symbol id="icon-SublevelBusinessFunction">
<title>Sublevel Business Function</title>
<path fill="#fff" style="fill: var(--color1, #fff)" d="M0.96 29.626h10.401v-9.503h6.252v9.503h10.401v-28.666h-27.053v28.666zM16.384 7.715h6.252v6.252h-6.252v-6.252zM6.337 7.715h6.252v6.252h-6.252v-6.252z"></path>
</symbol>
<symbol id="icon-SublevelBusinessUnit">
<title>Sublevel Business Unit</title>
<path fill="#fff" style="fill: var(--color1, #fff)" d="M0.561 30.314h6.318v-6.46h3.797v6.46h6.318v-28.924h-16.433v28.924zM9.93 4.798h3.797v3.797h-3.797v-3.797zM9.93 10.901h3.797v3.797h-3.797v-3.797zM9.93 17.004h3.797v3.797h-3.797v-3.797zM3.827 4.798h3.797v3.797h-3.797v-3.797zM3.827 10.901h3.797v3.797h-3.797v-3.797zM3.827 17.004h3.797v3.797h-3.797v-3.797z"></path>
</symbol>
</defs>
</svg>
</body>
</html>

Your HTML and SVG structure are quite complex so I have simplified it down to the bare minimum. You had hardcoded the fill as #fff on the PATH which made it difficult to affect the fill color of each copy of the symbol. Perhaps you have a good reason to nest SVGs inside other SVGs but as you can see, it's not necessary to achieve your desired result. (I have removed the POLYGON to further simplify the issue.)
This works, hopefully as you intended:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style>
.d1{
fill: red;
}
.d2{
fill: green;
}
.d3{
fill: orange;
}
</style>
<symbol id="icon-BusinessUnit">
<path d="M9.974 30.871h6.519v-6.666h3.918v6.666h6.519v-29.843h-16.955v29.843zM19.641 4.545h3.918v3.918h-3.918v-3.918zM19.641 10.842h3.918v3.918h-3.918v-3.918zM19.641 17.139h3.918v3.918h-3.918v-3.918zM13.344 4.545h3.918v3.918h-3.918v-3.918zM13.344 10.842h3.918v3.918h-3.918v-3.918zM13.344 17.139h3.918v3.918h-3.918v-3.918zM28.451 3.701h8.452v27.17h-5.935v-6.068h-2.517v-21.102zM33.835 21.936h-0v-3.567h-3.567v3.567h3.567zM33.835 16.203h-0v-3.567h-3.567v3.567h3.567zM33.835 10.47h-0v-3.567h-3.567v3.567h3.567zM0 30.871v-27.17h8.452v21.102h-2.517v6.068h-5.935zM3.068 6.903v3.567h3.567v-3.567h-3.567zM3.068 12.636v3.567h3.567v-3.567h-3.567zM3.068 18.369v3.567h3.567v-3.567h-3.567z"></path>
</symbol>
</defs>
<use xlink:href="#icon-BusinessUnit" class="d1" transform="translate(0 0) scale(1)"/>
<use xlink:href="#icon-BusinessUnit" class="d2" transform="translate(100 0) scale(1.5)"/>
<use xlink:href="#icon-BusinessUnit" class="d3" transform="translate(200 0) scale(2)"/>
</svg>
In future please just abbreviate the code you're providing so that we can focus on the parts which are relevant to your question. And it's always good to include a Codepen / Fiddle or similar, otherwise people may not take the time to set up one for you. See https://codepen.io/MSCAU/pen/KxybQ.

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>