Unable to translate SVG clip-path - html

I have an image clipped with SVG clip-path. And I'm trying to move this clip-path, but with translateX the image dissapears. Looks like the problem is in clipPathUnits="objectBoundingBox". How can I move the path?
svg {
position: absolute;
}
picture {
display: block;
width: 100%;
height: 100%;
}
/* #shape {
transform: translateX(1px);
} */
<svg class="hero-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2560px" height="1164px" viewBox="0 0 1280 582" version="1.1">
<clipPath id="mask-path" clipPathUnits="objectBoundingBox">
<path
id="shape"
fill="#E5EFF7"
d='M0, 0 L1, 0 L1, 0.4996753848797251 C0.909334453125, 0.6 0.7926289296875, 0.75 0.6498834375, 0.6158118900343643 C0.4357651953125, 0.401758644329897 0.366062217578125, 0.5330226374570446 0.20884810625, 0.5184233780068728 C0.104038698828125, 0.5086905378006873 0.034422663203124995, 0.4739563067010309 0, 0.4142206847079038 Z'
/>
</clipPath>
</svg>
<picture id="hero-bg" style="clip-path: url(#mask-path); -webkit-clip-path: url(#mask-path);">
<img src="https://www.google.es/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Doctors" style="width:100%;">
</picture>
I use Google Chrome Version 66.0.3359.181. In Safari translateX do nothing.
There is a fiddle: https://jsfiddle.net/yhw8soq0/
Thanks.

Related

How to extend an SVG graphic downwards filling the page?

In HTML, I am trying to use SVG graphics to create a background section to a part of my site. It uses a curve that sections off a part of the website to another. I have managed to create a basic outline for the general shape of the SVG: Picture of the animated banner and SVG page section.
However, I am expecting the SVG element to be stretched downwards so it fills out the rest of the page. This is not the case however as when scrolling down the SVG ends and the background takes up the rest of the site: The SVG is too small.
I need help extending the SVG to fill the rest of the page underneath it.
Current HTML Code:
div class="wave">
<svg width="100%" height="200px" fill="none" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path
fill="white"
d="
M0 67
C 273,183
822,-90
2525.01,98
V 359
H 0
V 67
Z">
</path>
</svg>
</div>
I have tried to change the SVG values but they normally just turn the graphic out of shape. I would like help understanding how to understand and fix this problem.
Futhermore, how to use the SVG viewBox to preserve the aspect ratio of the graphic?
[Update] Here is the website so far. I need to move the SVG graphic downwards as indicated in the arrow so the black particle background is above it: Picture Update

The problem here is you can (see thereafter) "fill" till the end of page, now that means playing with viewport and aspect ratio as said Robert. That means also your "curve" won't be constant regarding different sizes of screen.
Check and play with the snippet thereafter:
.wave {
width: 100vw;
height: 100vh;
}
<div class="wave">
<svg width="auto" height="100%" fill="none" viewbox="0 0 512 128" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin slice">
<path
fill="red"
d="M 0,75 C 158.44341,97.135847 296.6677,25.650819 512,25 V 128 H 0 Z">
</path>
</svg>
</div>

perhaps this can work for you
you have your wave, plus a rect under
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
.wave {
width: 100%;
height: 100%;
}
<div class="wave">
<svg width="auto" height="100%" fill="#ff0000" viewbox="0 0 512 128" xmlns="http://www.w3.org/2000/svg">
<path d="M 0,75 C 158.44341,97.135847 296.6677,25.650819 512,25 V 128 H 0 Z"></path>
<rect width="512" height="129" x="0" y="127" />
</svg>
</div>

I thought about your problem.
If the idea is to have an image fullscreen on home with a wave svg down with a color and continuity same color in other part. An idea would be the following:
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
section {
min-height: 100vh;
background-color: #999999;
margin: 0;
}
section h2 {
margin: 0;
}
#home {
margin: 0;
padding: 0;
width: 100vw;
background-image: url("https://picsum.photos/1920/1080");
background-size: cover;
background-position: center;
position: relative;
}
#home .title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #7b98bc;
}
.wave {
width: 100%;
height: 100vh;
}
.wave svg {
display: inline-block;
}
<section id="home">
<div class="wave">
<svg width="100%" height="auto" fill="#999999" viewbox="0 0 512 128" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg">
<path d="M 0,75 C 158.44341,97.135847 296.6677,25.650819 512,25 V 128 H 0 Z"/>
</svg>
</div>
<div class="title">
<h2>Title of my website</h2>
</div>
</section>
<section id="part1">
<h2>here we are section part1</h2>
</section>

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

CSS clip-path property having issues with SVG paths

I am trying to use the clip-path css property on a div. The below is a working example that I initially started with
.contianer {
height: 300px;
width: 300px;
background: red;
display: flex;
align-items: center;
justify-content: center;
}
.box {
height: 150px;
width: 150px;
background: white;
clip-path: url(#clip);
}
<div class="contianer">
<div class="box"></div>
</div>
<svg height="210" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="clip">
<path d="M150 0 L75 200 L225 200 Z" />
</clipPath>
</defs>
</svg>
We now took this example to customize the path as per our needs, and tried making the path using Adobe Illustrator and ended up as below
.contianer {
height: 300px;
width: 300px;
background: red;
display: flex;
align-items: center;
justify-content: center;
}
.box {
height: 150px;
width: 150px;
background: white;
clip-path: url(#clip);
}
<div class="contianer">
<div class="box">
</div>
</div>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 1536">
<defs>
<style xmlns="http://www.w3.org/2000/svg">
.cls-1 {
fill: #e6e6e6;
}
</style>
<clipPath id="clip">
<path class="cls-2" d="M1866.25984,246.41732V257.189l-.37795,18.74409s1.52362,14.06693,1.559,14.17323,2.941,11.76378,2.941,11.76378l4.88976,6.66142,4.21654,2.374,7.61811,1.66536,30.685,1.73622h6.30709l29.55118-.5315,1.03052,18.03543v826.22835l-2.19982,27.07087-61.08661.70866-17.43307,2.69291-10.60443,8.27169-3.71053,8.45272-.31669,50.32929-3.93528.69966-443.19685-.28879-1.6919-44.69979-2.7018-16.37188-6.36191-6.8181-19.29163-2.126-43.79528.56693-20.26772-.4252-1.98425-22.8189-.16708-831.685,4.986-34.72441,10.77165-22.96063,18-16.58268,25.38581-8.60007,25.52966-3.0522Z"/>
</clipPath>
</defs>
</svg>
The issue as you can see is, the second example does not clip the path. I assume that the d attribute formatting has something to do with the issue. Whenever the path is taken from web sources, the path value is something like this M150 0 L75... whereas from illustrator it becomes as M1866.7,245.9s-1.1.... with decimals and all. I am not sure about relative paths and absolute paths and if that is the cause.
I am looking to render the second example correctly.
This is the actual clipping path
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 2048 1536"><defs><style>.cls-1{fill:#e6e6e6;}.cls-2{fill:#f2f2f2;stroke:red;stroke-miterlimit:10;stroke-width:0.5px;}</style></defs><path class="cls-2" d="M1866.25984,246.41732V257.189l-.37795,18.74409s1.52362,14.06693,1.559,14.17323,2.941,11.76378,2.941,11.76378l4.88976,6.66142,4.21654,2.374,7.61811,1.66536,30.685,1.73622h6.30709l29.55118-.5315,1.03052,18.03543v826.22835l-2.19982,27.07087-61.08661.70866-17.43307,2.69291-10.60443,8.27169-3.71053,8.45272-.31669,50.32929-3.93528.69966-443.19685-.28879-1.6919-44.69979-2.7018-16.37188-6.36191-6.8181-19.29163-2.126-43.79528.56693-20.26772-.4252-1.98425-22.8189-.16708-831.685,4.986-34.72441,10.77165-22.96063,18-16.58268,25.38581-8.60007,25.52966-3.0522Z"/></svg>

Your second example does in fact clip the path, but the problem is that the svg path is much larger than the box or even the container. You need to transform (scale) the clipping path to the same dimensions as your html elements. In the svg, you can see that viewBox="0 0 2048 1536"
I Don't know what the clipping path should really look like, but if make the following change to your svg file it might start to make sense:
<clipPath id="clip" transform="scale(0.1 0.1)">
You probably want to play around with the values of the viewbox and the dimensions of your css to get the correct factors for the clipPath transformation.

I want to implement SVG clip-path for SVG element

I want to implement SVG clip-path for SVG element. I have a DIV element in which I want to put SVG element which will act as a clipping mask, and also I have the separate SVG element that has an image to which the clipping mask will be applied.
The first problem I faced with is that clipping mask moves to the left top corner of the viewport but not located inside of the parent DIV element.
The second problem is that I want to make an image on the full screen not depending on the screen size.
Incorrect Mask Circle
Correct Mask Circle (what I want to have)
Do you have suggestions how to make it?
Thanks in advance!
html, body { margin:0; padding:0; overflow:hidden }
svg { position:absolute; top:0; left:0;}
.image-clip-src {
width: 100%;
height: 100%;
}
.svg-wrapper {
width: 72px;
height: 72px;
padding: 2.5em;
border: 1px solid #4D4F51;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
position: fixed;
top: 55%;
z-index: 9;
left: 64%;
transform: translateY(-50%);
cursor: pointer;
}
.clipped-image image {
clip-path: url(#clipping);
}
<svg class="clipped-image" width="100%" height="100%" viewBox="0 0 1440 960" preserveAspectRatio="xMinYMin meet">
<image class="image-clip-src" xlink:href="https://images.unsplash.com/photo-1526327227970-4bda49fa3489?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3c4bce33d96df6b18af53fb2dae3363e&auto=format&fit=crop&w=1650&q=80" width="100%" height="100%" overflow="visible"/>
</svg>
<div class="svg-wrapper">
<svg class="svg-defs">
<defs>
<clipPath id="clipping">
<circle r="72" stroke="black" stroke-width="3"/>
</clipPath>
</defs>
</svg>
</div>

That's not the way SVG works.
When you tell something to use a clip path, all it sees is the clip path definition itself. It doesn't know or care about where on the page you have positioned it's parent <svg>.
If you want the clip circle to be at a certain position on the water image, you need to specify its position using cx and cy.
html, body { margin:0; padding:0; overflow:hidden }
svg { position:absolute; top:0; left:0;}
.image-clip-src {
width: 100%;
height: 100%;
}
.clipped-image image {
clip-path: url(#clipping);
}
<svg class="clipped-image" width="100%" height="100%" viewBox="0 0 1440 960" preserveAspectRatio="xMinYMin meet">
<defs>
<clipPath id="clipping">
<circle cx="64%" cy="55%" r="72" stroke="black" stroke-width="3"/>
</clipPath>
</defs>
<image class="image-clip-src" xlink:href="https://images.unsplash.com/photo-1526327227970-4bda49fa3489?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3c4bce33d96df6b18af53fb2dae3363e&auto=format&fit=crop&w=1650&q=80" width="100%" height="100%" overflow="visible"/>
<circle cx="64%" cy="55%" r="72" fill="none" stroke="#4D4F51" stroke-width="1"/>
</svg>

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>