I'm having an issue with Firefox (43.04) and Transform Origin with the rotation of a path within an SVG element.
Instead of using the origin of the targeted Rect, it's using the center origin of the entire SVG itself. No problems in Webkit browsers.
Any suggestions?
https://jsfiddle.net/tj86Lz9g/
HTML
<a>
<svg x="0px" y="0px" viewBox="0 0 100 40">
<rect class="square" x="0" y="0" width="10" height="10"/>
<rect class="rectangle" x="20" y="0" width="30" height="10"/>
</svg>
</a>
CSS
rect {
fill:#FF0000;
}
rect.square {
transition: transform .8s ease-in-out;
transform-origin:center center;
}
a:hover rect.square {
transform:rotate(360deg);
}
Related
I'm having issues with the transform-origin while attempting to scale sub-elements.
While attempting to scale animate a box within a larger svg, it uses the transform origin (0,0) from the overall svg, rather than the center of the element I am trying to scale.
This makes it appear like it is "flying in from the top left" which is not what I am looking for. I am looking to make it scale from the elements center.
How do I get the transform-origin to be set relative to the specific element I am animating, without having to hardcode the (x,y) position of the sub-element itself.
Here is a simple example of the issue I'm dealing
#keyframes scaleBox {
from {transform: scale(0);}
to {transform: scale(1);}
}
#animated-box {
animation: scaleBox 2s infinite;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="
width: 195px;
"><defs>
<style>.cls-1{fill:#7f7777;}.cls-2{fill:#fff;}</style>
</defs>
<rect class="cls-1" x="0.5" y="0.5" width="99" height="99"></rect>
<path d="M99,1V99H1V1H99m1-1H0V100H100V0Z"></path>
<rect id="animated-box" class="cls-2" x="10.5" y="8.5" width="22" height="6"></rect></svg>
You need transform-box: fill-box;
#keyframes scaleBox {
from {transform: scale(0);}
to {transform: scale(1);}
}
#animated-box {
transform-box: fill-box;
animation: scaleBox 2s infinite;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="
width: 195px;
"><defs>
<style>.cls-1{fill:#7f7777;}.cls-2{fill:#fff;}</style>
</defs>
<rect class="cls-1" x="0.5" y="0.5" width="99" height="99"></rect>
<path d="M99,1V99H1V1H99m1-1H0V100H100V0Z"></path>
<rect id="animated-box" class="cls-2" x="10.5" y="8.5" width="22" height="6"></rect></svg>
I have a svg which is an arrow facing right. However, i am unable to make the arrow downward by adding transform: rotate(). When I change css svg path, the entire arrow is gone. How do I solve it?
Before:
After:
In my html and css,
svg path {
transform: rotate(90);
}
<svg class="arrow-right" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
<g id="ico___black" data-name="ico_>_black" transform="translate(19525 16160)">
<path id="パス_60" data-name="パス 60" d="M1061.961,192.633l5.465,5.465,5.465-5.465"
transform="translate(-19707.389 -15080.434) rotate(-90)" fill="none" stroke="#2b2525"
stroke-width="2" />
<rect id="長方形_124" data-name="長方形 124" width="25" height="25" transform="translate(-19525 -16160)"
fill="none" />
</g>
</svg>
you can apply the transform on the svg instead of the path.
svg {
transform: rotate(90);
}
Here is a simple version of CSS rules with hover and it is working fine:
https://codepen.io/hbi99/pen/oNvaEZK
...however if I try to use the SVG as symbol and reference it with USE-tag; the CSS rules for :hover is ignored. See this example:
https://codepen.io/hbi99/pen/pozxaea
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<symbol id="box" viewBox="0 0 200 200">
<style>
.test {
fill: #f00;
opacity: 0.35;
}
.test:hover {
fill: #fff;
opacity: 1;
}
</style>
<rect class="test" x="10" y="10" width="150" height="150"/>
</symbol>
</svg>
<svg><use href="#box"></use>
Any idea why the second example isn't working as intended?
I am testing this on Chrome (v76)
The example you linked that should not work, also works. But the code snippet you included in the question does not work since you use a class selector but don't use the class in the SVG image.
Add class="utc-bar" to the <rect> element and it works fine.
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<symbol id="box" viewBox="0 0 200 200">
<style>
.utc-bar {
fill: #f00;
opacity: 0.35;
}
.utc-bar:hover {
fill: #fff;
opacity: 1;
}
</style>
<rect class="utc-bar" x="10" y="10" width="150" height="150"/>
</symbol>
</svg>
<svg><use href="#box"></use>
I can't seem to properly target a symbol's path stroke when hovering.
There's a similar entry but it doesn't seem to target hovering. ( Controlling SVG colors with CSS )
In trying just to change the stroke on the use tag it just 'adds' a stroke where there wasn't one before
.terminal:hover {cursor:pointer;stroke:#000;}
When trying to target the path's themselves, it doesn't work at all
.terminal:hover path {stroke:#000;}
Does the Symbol change things for CSS targeting?
https://codepen.io/trevcis/pen/OYMLqO
Replace .terminal:hover path {stroke:#000;} with .terminal:hover use {stroke:#000;} as the actual node inside of .terminal is use, not path. It works on Chrome, FF, and Safari. Not sure about IE.
Updated answer:
If you want to use one same symbol but want to change each one's stroke color based on hover, you can try with CSS variables. Try below:
.terminal {
--color-st0: #f00; /* #54565A */
--color-st1: #0f0; /* #E2ECF5 */
}
.terminal:hover {
cursor:pointer;
}
.terminal:hover use {
--color-st0: #333333;
--color-st1: #333333;
}
.st0TERMINAL{
fill:none;
stroke: var(--color-st0);
stroke-width:6;
stroke-miterlimit:10;
}
.st1TERMINAL{
fill:none;
stroke: var(--color-st1);
stroke-width:2;
stroke-miterlimit:10;
}
.st2TERMINAL{
fill:#789904;
}
<svg id="assets" xmlns="http://www.w3.org/2000/svg" viewBox="-6 -6 200 200">
<symbol id="terminal" viewBox="0 0 16.8 16.8">
<path class="st0TERMINAL" d="M-0.8,2.6c0,0-1.8,0-1.8-1.8v-1.6c0,0,0-1.8,1.8-1.8h1.6c0,0,1.8,0,1.8,1.8v1.6c0,0,0,1.8-1.8,1.8H-0.8z"/>
<path class="st1TERMINAL" d="M-0.8,2.6c0,0-1.8,0-1.8-1.8v-1.6c0,0,0-1.8,1.8-1.8h1.6c0,0,1.8,0,1.8,1.8v1.6c0,0,0,1.8-1.8,1.8H-0.8z"/>
<path class="st2TERMINAL" d="M-0.8,2.6c0,0-1.8,0-1.8-1.8v-1.6c0,0,0-1.8,1.8-1.8h1.6c0,0,1.8,0,1.8,1.8v1.6c0,0,0,1.8-1.8,1.8H-0.8z"/>
</symbol>
<g id="terminal1" class="terminal">
<use xlink:href="#terminal" width="12" height="12" x="0" y="0" style="overflow:visible;"/>
</g>
<g id="terminal2" class="terminal">
<use xlink:href="#terminal" width="12" height="12" x="5" y="5" style="overflow:visible;"/>
</g>
</svg>
I have the following SVG code for an exported asset from a Sketch file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="116px" height="117px" viewBox="0 0 116 117" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="loader_circles">
<!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
<title>Group 2</title>
<desc>Created with Sketch.</desc>
<defs>
<circle id="path-1" cx="58.5" cy="58.5" r="58.5"></circle>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="117" height="117" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<circle id="path-3" cx="59" cy="59" r="36"></circle>
<mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="72" height="72" fill="white">
<use xlink:href="#path-3"></use>
</mask>
</defs>
<g id="Common-elements" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="78,34">
<g id="Group-2" stroke="#4A90E2" stroke-width="14">
<use id="Oval-8" mask="url(#mask-2)" xlink:href="#path-1"></use>
<use id="Oval-8" mask="url(#mask-4)" xlink:href="#path-3"></use>
</g>
</g>
</svg>
It is a loading spinner with two circles one inside of another, now my aim is to use CSS3 Keyframe animation to animate the two circles, mainly rotate it using transform property.
I am not an expert with SVG so I searched for ways to animate SVG with CSS and found that it is simply animating the elements inside of the SVG code for a particular path.
So I did this
#path-1 {
transform-origin: center;
animation: rotateClockwise 0.6s infinite linear;
}
#path-3 {
transform-origin: center;
animation: rotateAntiClockwise 0.6s infinite linear;
}
#keyframes rotateClockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes rotateAntiClockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
The animation works, the two circles spins as it should but somehow the circles just gets malformed, the strokes of the circles just gets paler and thicker. The spinner looks like this when I don't do the transformation, I think the issue is mainly with the transform property
Here's a live demo:
http://jsbin.com/zipecefune
I am not sure why its happening, any ideas?
I'm not sure what is the source of the problem, but it seems wrong to animate something within defs as these are references, from MDN:
SVG allows graphical objects to be defined for later reuse. It is
recommended that, wherever possible, referenced elements be defined
inside of a <defs> element. Objects created inside a <defs> element
are not rendered immediately; instead, think of them as templates or
macros created for future use.
If instead of animating your circle elements you animate use, the problem is fixed (you need to rename the id property because they must be unique.
http://jsbin.com/qonokufimo/edit?html,css,js,output