Trying to "transform: rotate()" a <circle> element using styled-components - css

CodeSandbox with example:
https://codesandbox.io/s/floral-surf-l7m0x
I'm trying to rotate 180ยบ a circle element inside an SVG. I'm being able to do it with the regular <circle> tag, but I'm not being able to do it with the styled component styled.circle
LS.Svg_SVG = styled.svg`
border: 1px dotted silver;
width: 100px;
height: 100px;
`;
LS.Circle_CIRCLE = styled.circle`
stroke-dasharray: 289.0272;
stroke-dashoffset: -144.5136;
transform: rotate(180 50 50); /* <------------ IT DOES NOT WORK */
`;
export default function App() {
return (
<React.Fragment>
<LS.Container_DIV>
<LS.Svg_SVG viewBox="100 100">
<circle /* USING REGULAR <circle> */
cx="50"
cy="50"
r="46"
stroke="black"
strokeWidth="8px"
fill="none"
strokeDasharray="289.0272"
strokeDashoffset="-144.5136"
transform="rotate(180 50 50)" /* <----------------- IT WORKS */
/>
</LS.Svg_SVG>
</LS.Container_DIV>
<LS.Container_DIV>
<LS.Svg_SVG viewBox="100 100">
<LS.Circle_CIRCLE /* USING STYLED COMPONENTS */
cx="50"
cy="50"
r="46"
stroke="black"
strokeWidth="8px"
fill="none"
/>
</LS.Svg_SVG>
</LS.Container_DIV>
</React.Fragment>
);
}
The result I'm getting:
They both should be the same. The first one is rotated (using regular <circle>). The second one is not rotated (using styled-components). Even though I'm setting transform: rotate(-180 50 50); in the styled component.

In CSS, units are required (ie. 180deg, 50px)
The SVG-specific version of rotate: rotate(angle, cx, cy), is not supported in the CSS version of transform. You'll need to use transform-origin.
LS.Circle_CIRCLE = styled.circle`
stroke-dasharray: 289.0272;
stroke-dashoffset: -144.5136;
transform: rotate(180deg);
transform-origin: 50px 50px;
`;

Related

SVG not scaling with page resize React

I have an animated SVG in react that is supposed to draw some lines down the screen starting from the top to the bottom relative to 100vh adn 100vw. the problem is it works on my native resolution but not when the window is resized (i made the svg in gimp in respect to my native res). I have tried every single css combination i can think of but i just cant get it to work as needed.
(images at the bottom for an idea of what it should look like vs what happens when resized)
thanks in advance :)
SVG:
<svg className="line_svg" xmlns="http://www.w3.org/2000/svg"
width="auto" height="100%"
viewBox="0 0 2560 1440">
<path id="Selection"
fill="none" stroke="green" stroke-width="2"
d="M 1279.00,0.00
C 1280.66,5.65 1283.93,7.93 1288.00,12.00
1288.00,12.00 1306.00,30.00 1306.00,30.00
1306.00,30.00 1374.00,98.00 1374.00,98.00
1374.00,98.00 1548.00,271.00 1548.00,271.00
1548.00,271.00 1606.00,329.00 1606.00,329.00
1612.96,335.96 1631.41,355.28 1638.00,360.00
1638.00,360.00 1610.91,389.00 1610.91,389.00
1610.91,389.00 1576.91,425.00 1576.91,425.00
1576.91,425.00 1549.09,454.00 1549.09,454.00
1549.09,454.00 1457.91,551.00 1457.91,551.00
1457.91,551.00 1396.09,616.00 1396.09,616.00
1396.09,616.00 1151.91,875.00 1151.91,875.00
1151.91,875.00 1124.09,904.00 1124.09,904.00
1124.09,904.00 1014.91,1020.00 1014.91,1020.00
1014.91,1020.00 989.04,1047.00 989.04,1047.00
989.04,1047.00 978.00,1059.00 978.00,1059.00
978.00,1059.00 965.83,1072.00 965.83,1072.00
964.29,1073.71 960.88,1076.96 960.17,1079.00
959.20,1081.77 961.03,1083.93 962.63,1086.00
962.63,1086.00 976.00,1101.00 976.00,1101.00
976.00,1101.00 1030.58,1162.00 1030.58,1162.00
1030.58,1162.00 1087.83,1226.00 1087.83,1226.00
1087.83,1226.00 1213.83,1367.00 1213.83,1367.00
1213.83,1367.00 1261.07,1420.00 1261.07,1420.00
1266.18,1425.63 1275.10,1437.95 1282.00,1440.00
1280.25,1433.86 1276.28,1430.56 1272.08,1426.00
1272.08,1426.00 1256.07,1408.00 1256.07,1408.00
1256.07,1408.00 1196.16,1341.00 1196.16,1341.00
1196.16,1341.00 1044.16,1171.00 1044.16,1171.00
1044.16,1171.00 993.17,1114.00 993.17,1114.00
993.17,1114.00 963.00,1081.00 963.00,1081.00
963.00,1081.00 975.04,1068.00 975.04,1068.00
975.04,1068.00 1024.09,1016.00 1024.09,1016.00
1024.09,1016.00 1052.91,986.00 1052.91,986.00
1052.91,986.00 1144.09,889.00 1144.09,889.00
1144.09,889.00 1205.91,824.00 1205.91,824.00
1205.91,824.00 1450.09,565.00 1450.09,565.00
1450.09,565.00 1477.91,536.00 1477.91,536.00
1477.91,536.00 1586.09,421.00 1586.09,421.00
1586.09,421.00 1612.96,393.00 1612.96,393.00
1612.96,393.00 1623.00,382.00 1623.00,382.00
1623.00,382.00 1635.28,369.00 1635.28,369.00
1636.74,367.34 1640.17,363.91 1640.83,362.00
1641.84,359.07 1639.76,357.00 1637.94,355.00
1637.94,355.00 1623.00,340.00 1623.00,340.00
1623.00,340.00 1560.00,277.00 1560.00,277.00
1560.00,277.00 1359.00,77.00 1359.00,77.00
1359.00,77.00 1304.00,22.00 1304.00,22.00
1298.18,16.18 1286.24,2.12 1279.00,0.00 Z" />
</svg>
CSS:
.front_page_parent{
width: 100vw;
height: 100vh;
display: block;
margin: 0 auto;
padding: 0;
}
.line_svg{
display: block;
margin: 0 auto;
max-width: 100vw;
max-height: 100vh;
stroke-dasharray: 6000;
animation: draw 2s ease-in;
fill: green;
overflow: hidden;
}
Structure of App
export const App = () => {
return (
<div className="app">
<FrontPage />
</div>
)
}
export const FrontPage = () => {
return (
<div className="font_page_parent" style={BackgroundImageStyle}>
<svg className="line_svg" xmlns="http://www.w3.org/2000/svg"
width="auto" height="100%"
viewBox="0 0 2560 1440">
<path id="Selection"
fill="none" stroke="green" stroke-width="2"
d="......."- />
</svg>
</div>
working full screen
not working resized

Why SVG rotation was not centered?

I have a simple SVG image. There is a circle inside which I would like to rotate 90 degrees. But as you can see in JSFiddle example center of the rotation is not in the middle. What am I doing wrong?
svg {
background-color: #ddd;
}
.circle1 {
fill: none;
stroke-width: 20px;
stroke: #b5b5b5;
}
.circle2 {
fill: #aaa;
transform: rotate(-20deg);
stroke-width: 15px;
stroke: #71c7ff;
}
<svg height="600" width="600">
<circle class="circle1" cx="300" cy="300" r="200"></circle>
<circle class="circle2" cx="300" cy="300" r="200"></circle>
</svg>
Here is JSFiddle example https://jsfiddle.net/oxt681gr/1/
By default, the origin of a transform should be 0px 0px, but now we have wrong info on MDN:
By default, the origin of a transform is center.
Source-link
It is wrong. But in the case if it would be in center of your circle you would not able to see the result of your rotation because you will rotate the circle in his center.
You can change the rotation center with CSS property transform-origin or with SVG transform attribute. In SVG transform attribute we have the default also on 0px 0px. To rotate SVG (without CSS) use transform="rotate(deg, cx, cy)", where deg is the degree you want to rotate and (cx, cy) define the center of rotation.
In my solution you can change it interactive with CSS and JS:
var input = document.querySelector('input'),
circle2 = document.querySelector('.circle2'),
output = document.querySelector('span');
input.onchange = function(e)
{
var newTransformOrigin = e.target.value;
output.innerHTML = newTransformOrigin + 'px' + ' ' + newTransformOrigin + 'px';
circle2.style.transformOrigin = output.innerHTML;
};
svg {background-color:#ddd}
.circle1 {fill: none; stroke-width: 20px; stroke: #b5b5b5}
.circle2
{
fill: #aaa;
transform-origin: 0 0;
transform: rotate(-20deg);
stroke-width: 15px;
stroke: #71c7ff;
}
<p>Change transform-origin <input type="range" min="0" max="600" value="0" step="50">
<span>0px 0px</span></p>
<svg height="600" width="600">
<circle class="circle1" cx="300" cy="300" r="200"></circle>
<circle class="circle2" cx="300" cy="300" r="200"></circle>
</svg>
Please change to full page to see the example.

Why isn't this transform scale animating?

I am trying to animate a circle from scale(0) to scale(1) but it does not animate even though opacity animates.
https://codepen.io/labeeb/pen/rJaNdN
setInterval(function() {
TweenMax.to($("circle"), 1, {
css: {
opacity: 1
},
scale: 1
});
}, 1000);
circle {
transform: scale(0);
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="500" height="500">
<g>
<circle cx="30" cy="30" r="50" fill red></circle>
</g>
</svg>
I edited your post and put the code into a code-snippet.
While doing that, the error TweenMax is not defined was visible in the console.
You really did not define TweenMax.
You forgot to add some code.

Cannot override class properties inside use Tag

I need to change SVG fill property by adding up a class. Say from #fff to #000. I tried fiddling with two different methods. I got successful with one of either method. Rather I don't prefer the method to use which I was successful.
Method 1: - Succesful.
I just added a class on the body tag and over-ride the svg fill property. Take a look at the code below
var button = document.getElementById("btn");
var body = document.body
var count = false;
button.onclick = changeBackground;
function changeBackground() {
body.classList.toggle('toggle');
}
body {
background: #3d3d3d;
}
.sheetListWhite {
fill: #fff;
}
.slBGColor {
fill: #3d3d3d;
}
.toggle {
background: #fff;
}
.toggle .sheetListWhite {
fill: #3d3d3d;
}
.toggle .slBGColor {
fill: #fff;
}
<svg width="18px" height="18px" viewBox="-2 -2 13 13">
<use xlink:href="#sharedByMe" class="sheetListWhite"></use>
</svg>
<button id="btn"> Change background</button>
<svg style="display:none;">
<symbol id="sharedByMe">
<g id="user-(5)">
<path d="M5.76735992,5.07170748 C6.58617985,4.59194553 7.12018634,3.73525063 7.12018634,2.74147173 C7.12020298,1.23365988 5.8385508,0 4.27211846,0 C2.70568612,0 1.42403394,1.23365988 1.42403394,2.74147173 C1.42403394,3.73525063 1.95804042,4.59196155 2.77686035,5.07170748 C1.35282642,5.58574044 0.284796801,6.78512932 0,8.22439918 L0.712025292,8.22439918 C1.06802962,6.64806134 2.52768396,5.48292744 4.27211846,5.48292744 C6.01655296,5.48292744 7.47620731,6.64804532 7.83221163,8.22439918 L8.54423692,8.22439918 C8.25944012,6.75085832 7.19141051,5.55146944 5.76735992,5.07170748 Z M2.13605923,2.74147173 C2.13605923,1.61062486 3.09729421,0.685371939 4.27211846,0.685371939 C5.44694272,0.685371939 6.40817769,1.61062486 6.40817769,2.74147173 C6.40817769,3.87231861 5.44694272,4.79757153 4.27211846,4.79757153 C3.09729421,4.79757153 2.13605923,3.87231861 2.13605923,2.74147173 Z" id="Shape"></path>
</g>
<g id="shared-folder" transform="translate(6.111111, 5.294118)">
<ellipse id="Oval-6" class="slBGColor" cx="2.44444444" cy="2.35294118" rx="2.44444444" ry="2.35294118"></ellipse>
<path d="M3.54444101,1.45883032 C3.94870693,1.45883032 4.27777778,1.13170727 4.27777778,0.729415161 C4.27777778,0.327123049 3.94870693,0 3.54444101,0 C3.14017508,0 2.81110424,0.327140144 2.81110424,0.729415161 C2.81110424,0.781778783 2.81720578,0.832655093 2.82779325,0.881924423 L1.89436023,1.34613656 C1.7598169,1.19301186 1.56441282,1.09413129 1.34443069,1.09413129 C0.940181958,1.09411419 0.611111111,1.42125434 0.611111111,1.82352936 C0.611111111,2.22580437 0.940181958,2.55294452 1.34444788,2.55294452 C1.56439563,2.55294452 1.75974815,2.45413233 1.89429148,2.30105891 L2.82781043,2.76516848 C2.81720578,2.81442071 2.81110424,2.86527993 2.81110424,2.91764355 C2.81110424,3.31991857 3.14017508,3.64705871 3.54444101,3.64705871 C3.94870693,3.64705871 4.27777778,3.31993566 4.27777778,2.91764355 C4.27777778,2.51536853 3.94870693,2.18822839 3.54444101,2.18822839 C3.32445888,2.18822839 3.12903762,2.28710896 2.99449429,2.44025076 L2.06104408,1.97615829 C2.07164873,1.92685476 2.07778465,1.87594426 2.07778465,1.82352936 C2.07778465,1.77116573 2.07168311,1.72028942 2.06109564,1.67102009 L2.99452866,1.20680796 C3.12905481,1.35994975 3.32444169,1.45883032 3.54444101,1.45883032 Z" id="Shape"></path>
</g>
</symbol>
</svg>
See the fiddle HERE
Method 2 - Failed
Instead of adding the class directly to the body tag i added it on a div.
var button = document.getElementById("btn");
var body = document.getElementById("check");
var count = false;
button.onclick = changeBackground;
function changeBackground() {
body.classList.toggle('toggle');
}
div {
height: 300px;
width: 100%;
background: #3d3d3d
}
.sheetListWhite {
fill: #fff;
}
.slBGColor {
fill: #3d3d3d;
}
.toggle {
background: #fff;
}
.toggle .sheetListWhite {
background: #3d3d3d
}
.toggle .slBGColor {
fill: #fff;
}
<div id="check">
<svg width="18px" height="18px" viewBox="-2 -2 13 13">
<use xlink:href="#sharedByMe" class="sheetListWhite"></use>
</svg>
<button id="btn"> Change background</button>
</div>
<svg style="display:none;">
<symbol id="sharedByMe">
<g id="user-(5)">
<path d="M5.76735992,5.07170748 C6.58617985,4.59194553 7.12018634,3.73525063 7.12018634,2.74147173 C7.12020298,1.23365988 5.8385508,0 4.27211846,0 C2.70568612,0 1.42403394,1.23365988 1.42403394,2.74147173 C1.42403394,3.73525063 1.95804042,4.59196155 2.77686035,5.07170748 C1.35282642,5.58574044 0.284796801,6.78512932 0,8.22439918 L0.712025292,8.22439918 C1.06802962,6.64806134 2.52768396,5.48292744 4.27211846,5.48292744 C6.01655296,5.48292744 7.47620731,6.64804532 7.83221163,8.22439918 L8.54423692,8.22439918 C8.25944012,6.75085832 7.19141051,5.55146944 5.76735992,5.07170748 Z M2.13605923,2.74147173 C2.13605923,1.61062486 3.09729421,0.685371939 4.27211846,0.685371939 C5.44694272,0.685371939 6.40817769,1.61062486 6.40817769,2.74147173 C6.40817769,3.87231861 5.44694272,4.79757153 4.27211846,4.79757153 C3.09729421,4.79757153 2.13605923,3.87231861 2.13605923,2.74147173 Z" id="Shape"></path>
</g>
<g id="shared-folder" transform="translate(6.111111, 5.294118)">
<ellipse id="Oval-6" class="slBGColor" cx="2.44444444" cy="2.35294118" rx="2.44444444" ry="2.35294118"></ellipse>
<path d="M3.54444101,1.45883032 C3.94870693,1.45883032 4.27777778,1.13170727 4.27777778,0.729415161 C4.27777778,0.327123049 3.94870693,0 3.54444101,0 C3.14017508,0 2.81110424,0.327140144 2.81110424,0.729415161 C2.81110424,0.781778783 2.81720578,0.832655093 2.82779325,0.881924423 L1.89436023,1.34613656 C1.7598169,1.19301186 1.56441282,1.09413129 1.34443069,1.09413129 C0.940181958,1.09411419 0.611111111,1.42125434 0.611111111,1.82352936 C0.611111111,2.22580437 0.940181958,2.55294452 1.34444788,2.55294452 C1.56439563,2.55294452 1.75974815,2.45413233 1.89429148,2.30105891 L2.82781043,2.76516848 C2.81720578,2.81442071 2.81110424,2.86527993 2.81110424,2.91764355 C2.81110424,3.31991857 3.14017508,3.64705871 3.54444101,3.64705871 C3.94870693,3.64705871 4.27777778,3.31993566 4.27777778,2.91764355 C4.27777778,2.51536853 3.94870693,2.18822839 3.54444101,2.18822839 C3.32445888,2.18822839 3.12903762,2.28710896 2.99449429,2.44025076 L2.06104408,1.97615829 C2.07164873,1.92685476 2.07778465,1.87594426 2.07778465,1.82352936 C2.07778465,1.77116573 2.07168311,1.72028942 2.06109564,1.67102009 L2.99452866,1.20680796 C3.12905481,1.35994975 3.32444169,1.45883032 3.54444101,1.45883032 Z" id="Shape"></path>
</g>
</symbol>
</svg>
Fiddle it HERE
Now you can see I can't override the following classes .slBGColor, .sheetListWhite
How can I get rid of this bug? Any Idea. I don't want to use the svg tag directly instead of use tag. I mean I would like to use all of my SVG from an external resource. Any Help
Thanks.
The "insides" of a <use> cannot be addressed via the <use> element. It is considered opaque/private. As far as the browser is concerned, there is no class="slBGColor" inside the <div>. So .toggle .slBGColor {} does nothing.
You can make it work by restyling the symbol definition itself.
For example, if I make the following two changes to your example, the ellipse in the symbol changes colour based on whether the "toggle" class is set or not.
var body = document.body;
.toggle div {
background: red;
}
https://jsfiddle.net/nuorcj0a/4/
However, be aware that will also change any other references to that symbol on the page.

Change direction of SVG animation

I saw this SVG animation and I'm wondering how to alter the direction that the line is erased in; currently the line retracts from the last point it is drawn, however I want the reverse; for the line to erase itself from the point where it first started to draw (so that it looks more like a loading animation).
I see that the animation property on .path has a value of infinite, but I'm not sure how the direction is specified.
The HTML is
<div class="bg">
<svg xmlns="http://www.w3.org/2000/svg" width="670" height="236" viewBox="0 0 670 236">
<path class="path" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M343.6 75.9v20.3l23.1 21.8-23.1 21.8v20.3l44.6-42.1zM326.4 139.8l-23.1-21.8 23.1-21.8v-20.3l-44.6 42.1 44.6 42.1z"/>
<path class="path" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M335 38.9c-43.7 0-79.1 35.4-79.1 79.1s35.4 79.1 79.1 79.1 79.1-35.4 79.1-79.1-35.4-79.1-79.1-79.1zM335 182.9c-35.8 0-64.9-29.1-64.9-64.9s29.1-64.9 64.9-64.9 64.9 29.1 64.9 64.9-29.1 64.9-64.9 64.9z"/>
</svg>
</div>
And the CSS is
body {
background-color: #fff;
}
.bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.path {
animation: draw 3.5s infinite;
}
#keyframes draw {
50% {
stroke-dashoffset: 0;
}
}
I like your idea of making this an loading animation:
CODEPEN
Now what i did:
changed the animation start stop point
#keyframes draw {
100% {
stroke-dashoffset: -500;
}
}
Why -500?
Because this is the value of the dash-array.
This is defined in the <svg>: dasharray="500"
Changed this value in the inner most path. It was only 300
I added a linear animation
animation: draw 5s infinite linear;
The default is ease. I found the animation has better consistency with a linear animation.
NOTE
dashoffset=500 <- makes the animation start without the dash/stroke
I used the negative value for stroke-dashoffset that Persijn recommended. This worked great in Chrome and FF, but it didn't work properly in Safari.
I've found that if you open the SVG in Illustrator, you can reverse the direction of the path, by opening the Attributes panel (you might have to click the "show more" in the top right) and literally clicking the "reverse path" button.
stroke-dasharray can be a list of white space separated dashes and gaps, so you could do something like this:
var svgPath = document.getElementById('svgPath');
var pathLength = svgPath.getTotalLength();
var offset = 0;
function offsetPath() {
requestAnimationFrame(offsetPath);
offset += 0.1;
var dasharray = 0 + ' ' + offset + ' ' + (pathLength - offset);
svgPath.setAttribute('stroke-dasharray', dasharray);
}
requestAnimationFrame(offsetPath);
<svg xmlns="http://www.w3.org/2000/svg" width="670" height="236" viewBox="0 0 670 236">
<path id="svgPath" class="path" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="100 100 100" fill="none" d="M343.6 75.9v20.3l23.1 21.8-23.1 21.8v20.3l44.6-42.1zM326.4 139.8l-23.1-21.8 23.1-21.8v-20.3l-44.6 42.1 44.6 42.1z"
/>
</svg>
Changing SVG Line Animation Direction
Add KeyFrames and Classes for Both Directions:
.dash {
stroke-dasharray : 10 5;
animation : dash 4s linear infinite;
}
.dash_reverse {
stroke-dasharray : 10 5;
animation : dash_reverse 4s linear infinite;
}
#keyframes dash {
to {
stroke-dashoffset: 100;
}
}
#keyframes dash_reverse {
to {
stroke-dashoffset: -100;
}
}
Use JavaScript to Toggle Animation:
function animate_line_forward(id) {
$("#" + id).removeClass("dash_reverse");
$("#" + id).addClass("dash");
}
function animate_line_reverse(id) {
$("#" + id).removeClass("dash");
$("#" + id).addClass("dash_reverse");
}
Call functions as needed (pass the SVG line id into the above functions:
Calling animate_line_forward:
Calling animate_line_reverse:

Resources