Why can't I add a border on my svg path? - html

I have a svg where I am highlighting my path on hover. Here is my svg
<svg version="1.1" x="0px" y="0px" viewBox="0 0 2986 886" enable-background="new 0 0 2986 886">
<image display="block" overflow="visible" width="2986" height="886" xlink:href="/A-1.jpg">
</image>
<path fill="none" stroke="#000000" strokeWidth="0.25" stroke-miterlimit="10" points="2781.5,905 2986,905 2986,865.6
2842.7,634.6 2635.2,601.1 " id="1"></path>
....
</svg>
Here is my css:
svg path{
fill:none;
pointer-events:all;
}
svg path:hover {
fill: rgba(73,143,226,0.80);
border: 5px solid #31C6FF;
}
svg rect:hover {
fill: rgba(73,143,226,0.80);
border: 5px solid #31C6FF;
}
svg polygon:hover {
fill: rgba(73,143,226,0.80);
border: 5px solid #31C6FF;
}
When I hover, my path changes to the proper color, but I don't get a border. What am I misunderstanding?


For SVG, use the stroke property instead of border.
Edit: As the owner of the question points out in comments, stroke-opacity: 1 was needed as well as stroke and stroke-width.

Related

Why doesn't my path element inherit fill attribute that was set in CSS?

I'm trying to make a path element in SVG icon inherit fill property from the parent.
When I try set : SVG path { fill: inherit} in CSS it not inherit it but choose his inner fill property. But I don't want delete his inner fill attribute because icon become black and I need set color for every icon. Is there is something wrong I do?
.contact__email-image {
fill: red;
path {
all: inherit;
}
&:hover {
fill: green;
}
}
<svg fill="none" viewBox="0 0 16 12" id="mail-black-envelope-symbol" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.953.252L8 6.336 1.047.252C1.332.096 1.653 0 2 0h12c.347 0 .668.096.953.252zm.79 10.71c.158-.286.257-.611.257-.962V2c0-.391-.117-.754-.312-1.062L10.691 5.31l5.052 5.652zM9.94 5.968l-1.61 1.409a.5.5 0 01-.658 0l-1.61-1.41-5.116 5.725c.307.193.666.308 1.055.308h12c.389 0 .748-.115 1.055-.308L9.939 5.968zM0 2c0-.392.117-.754.312-1.062l4.996 4.37-5.051 5.654A1.976 1.976 0 010 10V2z" fill="#87B0EE"/>
</svg>
my html:
<svg class="contact__email-image" viewBox="0 0 16 12" width="16" height="12"> <use xlink:href="img/icons/icons.svg#mail-black-envelope-symbol"></use> </svg>

What you want to do won't work because the selector cannot cross the shadow DOM. Rely on CSS variables to overcome this. Notice how I am defining the fill of the path using a variable with a fallback
.contact__email-image {
--color: red;
}
.contact__email-image:hover {
--color: green;
}
<svg class="contact__email-image" viewBox="0 0 16 12" width="40"> <use xlink:href="#mail-black-envelope-symbol"></use> </svg>
<svg viewBox="0 0 16 12" width="40"> <use xlink:href="#mail-black-envelope-symbol"></use> </svg>
<svg fill="none" viewBox="0 0 16 12" id="mail-black-envelope-symbol" xmlns="http://www.w3.org/2000/svg" style="width: 0">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.953.252L8 6.336 1.047.252C1.332.096 1.653 0 2 0h12c.347 0 .668.096.953.252zm.79 10.71c.158-.286.257-.611.257-.962V2c0-.391-.117-.754-.312-1.062L10.691 5.31l5.052 5.652zM9.94 5.968l-1.61 1.409a.5.5 0 01-.658 0l-1.61-1.41-5.116 5.725c.307.193.666.308 1.055.308h12c.389 0 .748-.115 1.055-.308L9.939 5.968zM0 2c0-.392.117-.754.312-1.062l4.996 4.37-5.051 5.654A1.976 1.976 0 010 10V2z" style="fill:var(--color,#87B0EE)"/>
</svg>

First things first, your styles are using SASS / SCSS syntax (the style nesting and &:hover). If you are not using a pre-processor for your styles you need to write in normal CSS.
In CSS that would look like:
.contact__email-image {
fill: red;
}
.contact__email-image:hover {
fill: green;
}
.contact__email-image path {
fill: inherit; /*avoid using all unless you need it*/
}
Next you are using the class contact__email-image to style the SVG, but it is not present. You need to add class="contact__email-image" inside the opening svg tag. I would replace the ID with it unless you are using it.
You also have some inline fill="" code on the SVG and the path, I would remove those since they may take priority over your styles if they are being loaded with an external stylesheet file.

Is this effect you're going for? It defaults to red, then changes to green on hover.
.contact__email-image svg {
fill: red;
}
.contact__email-image svg:hover {
fill: green;
}
.contact__email-image svg>path {
fill: inherit;
}
<div class="contact__email-image">
<svg fill="none" viewBox="0 0 16 12" id="mail-black-envelope-symbol" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.953.252L8 6.336 1.047.252C1.332.096 1.653 0 2 0h12c.347 0 .668.096.953.252zm.79 10.71c.158-.286.257-.611.257-.962V2c0-.391-.117-.754-.312-1.062L10.691 5.31l5.052 5.652zM9.94 5.968l-1.61 1.409a.5.5 0 01-.658 0l-1.61-1.41-5.116 5.725c.307.193.666.308 1.055.308h12c.389 0 .748-.115 1.055-.308L9.939 5.968zM0 2c0-.392.117-.754.312-1.062l4.996 4.37-5.051 5.654A1.976 1.976 0 010 10V2z"/>
</svg>
</div>

Can't change color of SVG to white

In my Angular project I'm working on project where I use SVG to show some icons. Icons have default grey color and I want to change it to white when hovering on it. I try to change to red/green/yellow color it works, but when I try white color it not working.
Here is my HTML code
<div class="user-name">
<svg *ngIf="hasCopyToClipboard" width="10" height="12" viewBox="0 0 10 12"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5"
d="M6.49997 0.500031H0.999995C0.449998 0.500031 0 0.950028 0 1.50003V7.99999C0 8.27499 0.224999 8.49999 0.499997 8.49999C0.774996 8.49999 0.999995 8.27499 0.999995 7.99999V2.00002C0.999995 1.72502 1.22499 1.50003 1.49999 1.50003H6.49997C6.77497 1.50003 6.99996 1.27503 6.99996 1.00003C6.99996 0.725029 6.77497 0.500031 6.49997 0.500031ZM6.79497 2.79502L9.20995 5.21001C9.39495 5.39501 9.49995 5.65 9.49995 5.915V10.5C9.49995 11.05 9.04995 11.5 8.49996 11.5H2.99498C2.44499 11.5 1.99999 11.05 1.99999 10.5L2.00499 3.50002C2.00499 2.95002 2.44999 2.50002 2.99998 2.50002H6.08497C6.34997 2.50002 6.60497 2.60502 6.79497 2.79502ZM6.49997 6H8.74996L5.99997 3.25002V5.50001C5.99997 5.775 6.22497 6 6.49997 6Z"
fill="white"/>
</svg>
{{userData?.UserName}}
</div>
Here is my SCSS
.user-name {
width: 100%;
font-weight: 500;
font-size: 12px;
padding-left: 3px;
svg {
float: right;
margin: 2px 0 2px 10px;
cursor: pointer;
:hover {
fill: white;
}
}
}

You are setting the fill color on :hover directly on svg, while it should be on the path element, because the SVG path already has fill="blue".
svg:hover path { }
See below for an example as an extraction of your provided code.
svg {
margin: 2px 0 2px 10px;
cursor: pointer;
}
svg:hover path {
fill: red;
}
<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5"
d="M6.49997 0.500031H0.999995C0.449998 0.500031 0 0.950028 0 1.50003V7.99999C0 8.27499 0.224999 8.49999 0.499997 8.49999C0.774996 8.49999 0.999995 8.27499 0.999995 7.99999V2.00002C0.999995 1.72502 1.22499 1.50003 1.49999 1.50003H6.49997C6.77497 1.50003 6.99996 1.27503 6.99996 1.00003C6.99996 0.725029 6.77497 0.500031 6.49997 0.500031ZM6.79497 2.79502L9.20995 5.21001C9.39495 5.39501 9.49995 5.65 9.49995 5.915V10.5C9.49995 11.05 9.04995 11.5 8.49996 11.5H2.99498C2.44499 11.5 1.99999 11.05 1.99999 10.5L2.00499 3.50002C2.00499 2.95002 2.44999 2.50002 2.99998 2.50002H6.08497C6.34997 2.50002 6.60497 2.60502 6.79497 2.79502ZM6.49997 6H8.74996L5.99997 3.25002V5.50001C5.99997 5.775 6.22497 6 6.49997 6Z"
fill="blue"/>

How to put an image in SVG rounded corner hexagon using HTML and CSS?

I am trying to achieve something like the below using SVG:
I have tried many solutions from this platform and so far, I have accomplished this:
<svg xmlns="http://www.w3.org/2000/svg" width="327.846" height="318.144" viewBox="0 0 327.846 318.144">
<defs>
<style>
.a {
fill:#000;
stroke-width: 25px;
stroke: rgba(255, 255, 255, 0.5);
}
</style>
</defs>
<path class="a" d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z" transform="translate(111.598) rotate(30)"/>
</svg>
With the above code, I am able to add stroke but not image. And for below code, I am able to add the image but stroke is not appearing:
<svg xmlns="http://www.w3.org/2000/svg" width="327.846" height="318.144" viewBox="0 0 327.846 318.144">
<defs>
<style>
.a {
fill: #000;
stroke-width: 25px;
stroke: rgba(255, 255, 255, 0.5);
}
</style>
<clipPath id="image">
<path class="a"
d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z"
transform="translate(111.598) rotate(30)" />
</clipPath>
</defs>
<image clip-path="url(#image)" height="100%" width="100%" xlink:href="http://placekitten.com/800/800"
preserveAspectRatio="xMidYMin slice"></image>
</svg>
What am I missing to get both onboard?
PS: Rounded corners are a must for the outer core and transparent layer.
Any help/suggestions will be very helpful. Thanks.

Set fill: transparent / fill: none for the path and use it again, as a child of svg
<svg xmlns="http://www.w3.org/2000/svg" width="327.846" height="318.144" viewBox="0 0 327.846 318.144">
<defs>
<style>
.a {
fill: none;
stroke-width: 25px;
stroke: rgba(255, 255, 255, 0.5);
}
</style>
<clipPath id="image">
<path transform="translate(111.598) rotate(30)" d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z"/>
</clipPath>
</defs>
<image clip-path="url(#image)" height="100%" width="100%" xlink:href="http://placekitten.com/800/800" preserveAspectRatio="xMidYMin slice"></image>
<path class="a" d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z" transform="translate(111.598) rotate(30)"/>
</svg>

comments on #Vishal Bhatt
One more queue: when I increase stroke-width, the curve on the
transparent layer becomes a sharp corner. How can I keep that rounded
when increasing stroke-width?
will help solve the problem - stroke-linejoin:round;
Used a wide stroke of 65px while keeping the inner rounding of the stroke
For solution instead of clip-Path one can try mask:
<svg xmlns="http://www.w3.org/2000/svg" width="327.846" height="318.144" viewBox="0 0 327.846 318.144">
<defs>
<style>
.a {
fill:white;
stroke-width: 65px;
stroke: rgba(255, 255, 255, 0.5);
stroke-linejoin:round;
}
</style>
<mask id="msk">
<path class="a" transform="translate(111.598) rotate(30)" d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z"/>
</mask>
</defs>
<image mask="url(#msk)" height="100%" width="100%" xlink:href="http://placekitten.com/800/800" preserveAspectRatio="xMidYMin slice"></image>
</svg>
Update
Hexagon rotation command
transform="rotate(15 124.5 111.5)", here
15 - angle of rotation
124.5 111.5 - Hexagon rotation center coordinates
<svg xmlns="http://www.w3.org/2000/svg" width="327.846" height="318.144" viewBox="0 0 327.846 318.144">
<defs>
<style>
.a {
fill:white;
stroke-width: 45px;
stroke: rgba(255, 255, 255, 0.5);
stroke-linejoin:round;
}
</style>
<mask id="msk">
<path class="a" transform="translate(50 50) rotate(15 124.5 111.5)" d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z"/>
</mask>
</defs>
<image mask="url(#msk)" height="100%" width="100%" xlink:href="http://placekitten.com/800/800" preserveAspectRatio="xMidYMin slice"></image>
</svg>

Problem with clip-path or masks, is they need to have unique ids if you have multiple SVGs on the page.
One way around this is to create the SVG client-side; and generate a unique id for every clip-path
While we're at it might as well simplify that Hexagon path
Wrapped in a Custom Element (no shadowDOM required with that unique id) you get:
<style>
svg {
width: 148px;
background: teal;
}
</style>
<svg-hexed-image ></svg-hexed-image>
<svg-hexed-image src="http://placekitten.com/800/800"></svg-hexed-image>
<svg-hexed-image rotate="30" src="http://placekitten.com/801/801"></svg-hexed-image>
<svg-hexed-image rotate="45" stroke="red" opacity=".5" src="http://placekitten.com/300/300"></svg-hexed-image>
<script>
customElements.define('svg-hexed-image', class extends HTMLElement {
connectedCallback() {
let img = this.getAttribute("src") || "http://placekitten.com/120/120";
let strokewidth = this.getAttribute("stroke-width") || "3";
let opacity = this.getAttribute("opacity") || ".5";
let stroke = this.getAttribute("stroke") || "white";
let rotate = this.getAttribute("rotate") || 0;
let transform = `transform="rotate(${rotate} 23 23)"`;
// make very sure for a unique id:
let id = "id" + btoa(img) + (new Date() / 1);
let d = `M31 3.5a5 5 90 014 3l8 14a5 5 90 010 5l-8 14a5 5 90 01-4 3h-16a5 5 90 01-4-3l-8-14a5 5 90 010-5l8-14a5 5 90 014-3z`;
// now write HTML:
this.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 46">
<defs><clipPath id="${id}"><path fill="none" ${transform} d="${d}"></clipPath></defs>
<image clip-path="url(#${id})" height="100%" width="100%" href="${img}"></image>
<path fill="none" stroke="${stroke}" stroke-width="${strokewidth}"
${transform} opacity="${opacity}" d="${d}"/></svg>`;
}
});
</script>

Clipping path from SVG file

I tried copying my SVG into my HTML and defining it as a clipPath, but it doesn't display the shape the right way. Can I define clipPath using a file path?
<div class="gradient">
</div>
<svg height="0" width="0">
<defs>
<clipPath id="Camera">
<style>
.cls-1, .cls-2 {
fill: #363636;
}
.cls-1, .cls-3 {
stroke: #363636;
}
.cls-1 {
stroke-width: 1px;
fill-rule: evenodd;
}
.cls-3 {
fill: none;
stroke-width: 50px;
}
</style>
<path class="cls-1" d="M566.282,395.982s-121.771,16.243-155.258,35.532-93.7,51.606-135.978,123.854c-1.285-10.084-1.014-8.122-1.014-8.122v-33.5a319.278,319.278,0,0,1,20.3-80.2c15.223-37.882,41.848-78.09,77.121-99.489,55.447,0,87.691,5.262,142.067,27.411C565.1,395.035,566.282,395.982,566.282,395.982Zm-136.671,44.24S382.787,553.845,382.741,592.5s-2.176,106.981,39.225,179.738c-9.372-3.929-7.538-3.182-7.538-3.182l-29-16.751a319.037,319.037,0,0,1-59.278-57.684c-25.181-32.13-46.675-75.3-47.563-116.562,27.724-48.04,48.4-73.345,94.761-109.381C428.2,440.773,429.611,440.222,429.611,440.222Zm-34.372,138.5s74.972,97.311,108.424,116.665,91.55,55.336,175.261,55.844c-8.09,6.151-6.526,4.936-6.526,4.936l-29.01,16.739a319.273,319.273,0,0,1-79.6,22.5c-40.418,5.748-88.553,2.786-124.725-17.061-27.733-48-39.3-78.549-47.321-136.692C395.011,580.218,395.239,578.721,395.239,578.721ZM501.768,677.28s121.722-16.3,155.2-35.605,93.676-51.652,135.971-123.924c1.28,10.084,1.011,8.121,1.011,8.121l-0.015,33.5a319.666,319.666,0,0,1-20.323,80.215c-15.233,37.892-41.864,78.115-77.131,99.532-55.422.025-87.649-5.222-141.989-27.348C502.95,678.227,501.768,677.28,501.768,677.28Zm138.679-42.488s46.752-113.61,46.78-152.27,2.126-106.987-39.29-179.768c9.37,3.933,7.536,3.185,7.536,3.185l29,16.765a319.457,319.457,0,0,1,59.277,57.715c25.185,32.144,46.688,75.329,47.594,116.593C763.65,545.042,743,570.339,696.672,606.357,641.857,634.242,640.447,634.792,640.447,634.792ZM672.715,493.3s-74.971-97.311-108.423-116.665S472.741,321.3,389.031,320.789c8.089-6.151,6.525-4.936,6.525-4.936l29.01-16.739a319.289,319.289,0,0,1,79.6-22.5c40.418-5.748,88.552-2.786,124.725,17.061,27.733,48.005,39.3,78.549,47.321,136.692C672.943,491.8,672.715,493.3,672.715,493.3Z"/>
<circle class="cls-2" cx="176" cy="176" r="60"/>
<rect id="Camera_Body" data-name="Camera Body" class="cls-3" x="38" y="38" width="1001" height="1001" rx="100" ry="100"/>
</clipPath>
Will display this
https://codepen.io/TVsVeryOwn/pen/yjwaoy
I'm trying to get something resembling this (I know my gradient is backwards):

< clipPath >  only uses the fill of the shapes.
If you remove < rect id="Camera_Body" > part from your SVG code - you’ll see it’s working as you wanted without this rect element. The rect doesn’t have a fill - only a stroke - and the clipping doesn’t work on stroke.
This may help.

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>