my svg circle is not rotating proper - css

Hello I am trying to create a rotating svg circle but its not rotating proper.
I flowing this link.
https://www.youtube.com/watch?reload=9&v=1lmFMsrLgwM
this is my code
HTML-----
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
img{
margin:auto;
text-align: center;
display: block;
}
</style>
</head>
<body>
<img src="wheal.svg"/>
</body>
</html>
svg code
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="100px" height="100px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<circle fill="none" stroke="#EC008C" stroke-width="2" stroke-dasharray="1.5" cx="25" cy="25" r="19.5">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 50 50" to="360 50 50 " dur="10s" repeatCount="indefinite"/>
</circle>
</svg>


Please update your <animateTransform from="0 25 25" to="360 25 25" ... values, it works good after that, please have a look at the below working snippet. hope it help :)
svg {
margin: auto;
text-align: center;
display: block;
}
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 50 50">
<circle fill="none" stroke="#EC008C" stroke-width="2" stroke-dasharray="1.5" cx="25" cy="25" r="19.5">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 25 25" to="360 25 25 " dur="10s" repeatCount="indefinite" />
</circle>
</svg>

Related

How do I center this loader inside the SVG

I would like to center this loader inside the grey SVG vertically and horizontally. I can't use external CSS. Just either inline CSS or another way. I tried doing myself but struggled for a while. Thanks
<svg viewBox="0 0 2560 1440" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#F5F5F5" d="M0 0h2560v1440H0z"/>
<path opacity=".2" fill="#000" d="M20.201 5.169c-8.254 0-14.946 6.692-14.946 14.946 0 8.255 6.692 14.946 14.946 14.946s14.946-6.691 14.946-14.946c-.001-8.254-6.692-14.946-14.946-14.946zm0 26.58c-6.425 0-11.634-5.208-11.634-11.634 0-6.425 5.209-11.634 11.634-11.634 6.425 0 11.633 5.209 11.633 11.634 0 6.426-5.208 11.634-11.633 11.634z"/>
<path fill="#000" d="m26.013 10.047 1.654-2.866a14.855 14.855 0 0 0-7.466-2.012v3.312c2.119 0 4.1.576 5.812 1.566z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.75s" repeatCount="indefinite"/>
</path>
</svg>

Wrap your spinner in a <symbol> with a viewBox attribute as suggested by #exaneta and place a symbol instance with a specific width and height like so:
body{
margin:0;
}
*{
border-box:border-box;
}
<svg width="100%" height="100vh" xmlns="http://www.w3.org/2000/svg" style="background:#F5F5F5">
<symbol id="spinner" viewBox="5 5 30 30">
<path opacity=".2" fill="#000" d="M20.2 5.17c-8.25 0-14.95 6.69-14.95 14.95s6.69 14.95 14.95 14.95s14.95-6.69 14.95-14.95c0-8.25-6.69-14.95-14.95-14.95zm0 26.58c-6.43 0-11.63-5.21-11.63-11.63s5.21-11.63 11.63-11.63s11.63 5.21 11.63 11.63s-5.21 11.63-11.63 11.63z" />
<path fill="#000" d="M26.01 10.05l1.65-2.87a14.86 14.86 0 0 0-7.47-2.01v3.31c2.12 0 4.1 0.58 5.81 1.57z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.75s" repeatCount="indefinite" />
</path>
</symbol>
<use href="#spinner" x="50%" y="50%" transform="translate(-20)" width="40" height="40">
</svg>
The <use> element's placement is adjusted by translate(-20) (height or width/2)

Before pseudo element not showing up on path element

Hi i am trying to create a 'pin' on a SVG map of the whole world, the SVG is build with path elements, my thought was to use a before or after element and show the pin accordingly.
Apparently it is not showing on the path element, i can see it in the debugger/console and if i put it on a div element it works fine and shows up, i have cut out all countries except the first one in the SVG for simplicity.
CSS
.map-pin::after{
content: url('pin.svg');
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: left top;
width: 30px;
height: 30px;
z-index: 10;
font-size: 1px;
display: inline-block;
position: absolute;
left: -999px;
top: -999px;
/*display: none;*/
}
.map-pin.active::after{
display: block;
}
.map-pin.active[data-id="AF"]::after{
top: 0;
left: 0;
}
SVG
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" style="stroke-linejoin: round; stroke:#000; fill: none;" viewBox="0 0 2000 1001" id="svg2" inkscape:version="0.48.4 r9939" sodipodi:docname="world.svg">
<defs id="defs4">
<style type="text/css" id="style6">path { fill-rule: evenodd; }</style>
</defs>
<g id="countries">
<path id="AF" data-name="Afghanistan" data-id="AF" class="map-pin active" d="m 1369.9,333.8 -5.4,0 -3.8,-0.5 -2.5,2.9 -2.1,0.7 -1.5,1.3 -2.6,-2.1 -1,-5.4 -1.6,-0.3 0,-2 -3.2,-1.5 -1.7,2.3 0.2,2.6 -0.6,0.9 -3.2,-0.1 -0.9,3 -2.1,-1.3 -3.3,2.1 -1.8,-0.8 -4.3,-1.4 -2.9,0 -1.6,-0.2 -2.9,-1.7 -0.3,2.3 -4.1,1.2 0.1,5.2 -2.5,2 -4,0.9 -0.4,3 -3.9,0.8 -5.9,-2.4 -0.5,8 -0.5,4.7 2.5,0.9 -1.6,3.5 2.7,5.1 1.1,4 4.3,1.1 1.1,4 -3.9,5.8 9.6,3.2 5.3,-0.9 3.3,0.8 0.9,-1.4 3.8,0.5 6.6,-2.6 -0.8,-5.4 2.3,-3.6 4,0 0.2,-1.7 4,-0.9 2.1,0.6 1.7,-1.8 -1.1,-3.8 1.5,-3.8 3,-1.6 -3,-4.2 5.1,0.2 0.9,-2.3 -0.8,-2.5 2,-2.7 -1.4,-3.2 -1.9,-2.8 2.4,-2.8 5.3,-1.3 5.8,-0.8 2.4,-1.2 2.8,-0.7 -1.4,-1.9 z" style="fill:#f2f2f2;fill-rule:evenodd"></path>
</g>
</svg>
I also tried a more simple way by just adding an element inside the SVG after all the path elements, but this breaks the whole SVG.
Anyone able to help me out here, is it not possible in SVG path elements? and if so, what other options am i left with?
PIN:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" style="enable-background:new 0 0 512 512;" viewBox="0 0 512 512" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#454545;stroke-width:18;stroke-miterlimit:10;}
</style>
<g>
<g id="XMLID_4245_">
<path class="st0" d="M389.3,208.7c0-73.6-59.7-133.3-133.3-133.3c-73.6,0-133.3,59.7-133.3,133.3 c0,32.6,12.1,62,31.5,85.1l55.3,75.4l46.6,67.5l101.8-142.9C377.2,270.7,389.3,241.2,389.3,208.7z" id="XMLID_4247_"></path>
<path class="st0" d="M311,170.9L311,170.9c-12.1-11.6-31.7-11.6-43.8,0l-10.9,10.5L245.3,171 c-12.1-11.6-31.7-11.6-43.8,0c-12.1,11.6-12.1,30.4,0,42l54.7,52.5L311,213C323.1,201.4,323.1,182.6,311,170.9z" id="XMLID_4246_"></path>
</g>
</g>
</svg>

As I've commented you can't have a before pseudo element for a path. However in your case you can have a symbol for the pin and use it at the end of your document. This way it will stay above all the other paths. (a z-index won't work either in SVG).
If you are using a symbol with a viewBox attribute you can give the <use> element a position (x and y attributes) and a size (width and height attributes)
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" style="stroke-linejoin: round; stroke:#000; fill: none;" viewBox="1280 320 100 100" id="svg2" >
<defs id="defs4">
<style type="text/css" id="style6">path { fill-rule: evenodd; }</style>
</defs>
<symbol id="map-pin-after" viewBox="0 0 30 30">
<circle cx="15" cy="8" r="8" /> <polygon points="15,30 22.7,10 7.3,10 15,30"/>
</symbol>
<g id="countries">
<path id="AF" data-name="Afghanistan" data-id="AF" class="map-pin active" d="m 1369.9,333.8 -5.4,0 -3.8,-0.5 -2.5,2.9 -2.1,0.7 -1.5,1.3 -2.6,-2.1 -1,-5.4 -1.6,-0.3 0,-2 -3.2,-1.5 -1.7,2.3 0.2,2.6 -0.6,0.9 -3.2,-0.1 -0.9,3 -2.1,-1.3 -3.3,2.1 -1.8,-0.8 -4.3,-1.4 -2.9,0 -1.6,-0.2 -2.9,-1.7 -0.3,2.3 -4.1,1.2 0.1,5.2 -2.5,2 -4,0.9 -0.4,3 -3.9,0.8 -5.9,-2.4 -0.5,8 -0.5,4.7 2.5,0.9 -1.6,3.5 2.7,5.1 1.1,4 4.3,1.1 1.1,4 -3.9,5.8 9.6,3.2 5.3,-0.9 3.3,0.8 0.9,-1.4 3.8,0.5 6.6,-2.6 -0.8,-5.4 2.3,-3.6 4,0 0.2,-1.7 4,-0.9 2.1,0.6 1.7,-1.8 -1.1,-3.8 1.5,-3.8 3,-1.6 -3,-4.2 5.1,0.2 0.9,-2.3 -0.8,-2.5 2,-2.7 -1.4,-3.2 -1.9,-2.8 2.4,-2.8 5.3,-1.3 5.8,-0.8 2.4,-1.2 2.8,-0.7 -1.4,-1.9 z" fill="#f2f2f2"></path>
</g>
<use xlink:href="#map-pin-after" stroke="none" fill="red" width="30" height="30" x="1310" y="327"/>
</svg>
UPDATE
An update where I'm using the OP's pin:
Since the new pin is not a square, and in order to preserve the aspect ratio, I had to recalculate the height of the pin.
<svg viewBox="1280 320 100 100" >
<defs>
<symbol id="map-pin-after" viewBox="111 60 290 397">
<g id="XMLID_4245_" fill="none" stroke="#454545" stroke-width="18" stroke-mitterlimit="10">
<path d="M389.3,208.7c0-73.6-59.7-133.3-133.3-133.3c-73.6,0-133.3,59.7-133.3,133.3 c0,32.6,12.1,62,31.5,85.1l55.3,75.4l46.6,67.5l101.8-142.9C377.2,270.7,389.3,241.2,389.3,208.7z" ></path>
<path d="M311,170.9L311,170.9c-12.1-11.6-31.7-11.6-43.8,0l-10.9,10.5L245.3,171 c-12.1-11.6-31.7-11.6-43.8,0c-12.1,11.6-12.1,30.4,0,42l54.7,52.5L311,213C323.1,201.4,323.1,182.6,311,170.9z" ></path>
</g>
</symbol>
</defs>
<g id="countries">
<path id="AF" data-name="Afghanistan" data-id="AF" class="map-pin active" d="m 1369.9,333.8 -5.4,0 -3.8,-0.5 -2.5,2.9 -2.1,0.7 -1.5,1.3 -2.6,-2.1 -1,-5.4 -1.6,-0.3 0,-2 -3.2,-1.5 -1.7,2.3 0.2,2.6 -0.6,0.9 -3.2,-0.1 -0.9,3 -2.1,-1.3 -3.3,2.1 -1.8,-0.8 -4.3,-1.4 -2.9,0 -1.6,-0.2 -2.9,-1.7 -0.3,2.3 -4.1,1.2 0.1,5.2 -2.5,2 -4,0.9 -0.4,3 -3.9,0.8 -5.9,-2.4 -0.5,8 -0.5,4.7 2.5,0.9 -1.6,3.5 2.7,5.1 1.1,4 4.3,1.1 1.1,4 -3.9,5.8 9.6,3.2 5.3,-0.9 3.3,0.8 0.9,-1.4 3.8,0.5 6.6,-2.6 -0.8,-5.4 2.3,-3.6 4,0 0.2,-1.7 4,-0.9 2.1,0.6 1.7,-1.8 -1.1,-3.8 1.5,-3.8 3,-1.6 -3,-4.2 5.1,0.2 0.9,-2.3 -0.8,-2.5 2,-2.7 -1.4,-3.2 -1.9,-2.8 2.4,-2.8 5.3,-1.3 5.8,-0.8 2.4,-1.2 2.8,-0.7 -1.4,-1.9 z" fill="#f2f2f2" stroke="black"></path>
</g>
<use xlink:href="#map-pin-after" stroke="none" fill="red" width="41" height="30" x="1305" y="327"/>
</svg>

How to rotate an inline svg?

https://jsfiddle.net/L1u83Lts/1/ <-- That is my inline svg code, it has some css inside already so when you hover over the parent div, #menu_btn, the path changes color, I would like to know if it would be possible to use css transform: rotate() with this svg? I've tried a few methods but I know I'm missing something.
Code here as well vvv
<svg id="menu_svg" enable-background="new 0 0 512 512" height="75px" id="Layer_1" version="1.1" viewBox="0 0 512 512" width="80px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
#menu_svg {
width: 100%;
height: 100%;
}
.menu_svg {
fill: white;
}
#menu_btn:hover + #menu_svg .menu_svg {
fill: #FC0;
}
</style>
<defs>
<g id="menu_svg_cont">
<path d="M197.396,249.5c1.664,0,3.327,0.635,4.596,1.904L319.2,368.612c2.539,2.539,2.539,6.654,0,9.192 c-2.538,2.538-6.654,2.538-9.192,0L192.8,260.596c-2.539-2.539-2.539-6.654,0-9.192C194.069,250.135,195.732,249.5,197.396,249.5z " />
<path d="M314.604,132.292c1.664,0,3.327,0.634,4.596,1.904c2.539,2.539,2.539,6.654,0,9.192L201.992,260.596 c-2.538,2.539-6.653,2.539-9.192,0c-2.539-2.539-2.539-6.654,0-9.192l117.208-117.208 C311.277,132.927,312.941,132.292,314.604,132.292z"/>
</g>
</defs>
<g class="menu_svg">
<use xlink:href="#menu_svg_cont"/>
</g>
</svg>

You mean like this?
document.getElementById("menu_btn").addEventListener("click", function(evt) {
document.getElementById("part1").beginElement();
});
<button type="button" id="menu_btn">Begin</button>
<svg id="menu_svg" enable-background="new 0 0 512 512" height="75px" id="Layer_1" version="1.1" viewBox="0 0 512 512" width="80px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
#menu_svg {
width: 100%;
height: 100%;
}
.menu_svg {
fill: red;
}
#menu_btn:hover + #menu_svg .menu_svg {
fill: #FC0;
}
</style>
<defs>
<g id="menu_svg_cont">
<path d="M197.396,249.5c1.664,0,3.327,0.635,4.596,1.904L319.2,368.612c2.539,2.539,2.539,6.654,0,9.192 c-2.538,2.538-6.654,2.538-9.192,0L192.8,260.596c-2.539-2.539-2.539-6.654,0-9.192C194.069,250.135,195.732,249.5,197.396,249.5z " />
<path d="M314.604,132.292c1.664,0,3.327,0.634,4.596,1.904c2.539,2.539,2.539,6.654,0,9.192L201.992,260.596 c-2.538,2.539-6.653,2.539-9.192,0c-2.539-2.539-2.539-6.654,0-9.192l117.208-117.208 C311.277,132.927,312.941,132.292,314.604,132.292z"/>
</g>
</defs>
<g class="menu_svg">
<use xlink:href="#menu_svg_cont">
<animateTransform attributeType="XML" attributeName="transform" id="part1"
type="rotate" from="0 256 256" to="90 256 256"
dur="0.5s" begin="indefinite" fill="freeze"/>
<animateTransform attributeType="XML" attributeName="transform"
type="rotate" from="90 256 256" to="0 256 256"
dur="0.5s" begin="part1.end" fill="freeze" />
</use>
</g>
</svg>

Change color of SVG

I have some svg image like this
circles.svg
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)" stroke-width="2">
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
<path d="M36 18c0-9.94-8.06-18-18-18">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1s"
repeatCount="indefinite"/>
</path>
</g>
</g>
</svg>
And use it like this
<img src="circles.svg" width="50" alt=""/>
But i dont know how to change color
I have tried
.color{
fill:red;
}
<img src="circles.svg" width="50" alt="" class="color"/>
But it does not work, i dont want to change SVG i want only to change color by html, is that possible, not to edit primary SVG?

CSS does not apply across document boundaries. Since your SVG is in a different document, you cannot affect it's style using CSS in your HTML.
You would need to inline the SVG in your HTML file.

Try this Link
HTML
<div>
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)" stroke-width="2">
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
<path d="M36 18c0-9.94-8.06-18-18-18">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1s"
repeatCount="indefinite"/>
</path>
</g>
</g>
</svg>
</div>
css
div {
color: blue;
}
div svg {
fill: currentColor;
}

Fit/Stretch SVG to div background without reescaling

I have this SVG file:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
]>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="1px" height="100%" viewBox="64 0 1 26" enable-background="new 64 0 1 26" xml:space="preserve">
<defs>
</defs>
<path id="Outer_dark_border_1_" opacity="0.8" fill="#2F5870" d="M244,0H12C5.373,0,0,5.373,0,12v218v14v12h12h232h12v-12v-14V12
C256,5.373,250.627,0,244,0z M255,225v5v25H1v-25v-5V12.906C1,6.331,6.331,1,12.906,1h230.188C249.669,1,255,6.331,255,12.906V225z"
/>
<path id="Outer_light_border_1_" opacity="0.8" fill="#8DAFC4" d="M243.094,1H12.906C6.331,1,1,6.331,1,12.906V234v9.094V255h11.906
h230.188H255v-11.906V234V12.906C255,6.331,249.669,1,243.094,1z M254,24v230H2V24V13C2,6.925,6.925,2,13,2h230
c6.075,0,11,4.925,11,11V24z"/>
<linearGradient id="Top_gradient_2_" gradientUnits="userSpaceOnUse" x1="128" y1="24" x2="128" y2="2">
<stop offset="0.48" style="stop-color:#427B9D"/>
<stop offset="0.52" style="stop-color:#5D8EAB"/>
</linearGradient>
<path id="Top_gradient_1_" opacity="0.8" fill="url(#Top_gradient_2_)" d="M243,2H13C6.925,2,2,6.925,2,13v11h11h230h11V13
C254,6.925,249.075,2,243,2z"/>
<path id="Inner_dark_border_1_" opacity="0.8" fill="#2F5870" d="M8,25v223h240V25H8z M247,247H9V26h238V247z"/>
<path id="Inner_light_border_1_" opacity="0.8" fill="#8DAFC4" d="M7,24v225h242V24H7z M248,248H8V25h240V248z"/>
<polygon id="Solid_border_1_" opacity="0.8" fill="#427B9D" points="249,24 249,249 7,249 7,24 2,24 2,254 10,254 254,254 254,246
254,24 "/>
<rect id="top_1_" x="64" fill="none" width="1" height="26"/>
</svg>
and this HTML file:
<!DOCTYPE html>
<html>
<body>
<div style="background: url(top.svg); width: 900px; height: 100px;">
asd
</div>
</body>
</html>
and the result looks like this:
What I want is the SVG to stretch to the container. As you can see from the "asd", it only stretches the SVG horizontally, and centers vertically. I have tried to play around with dimensions and I have really no idea how to accomplish this.
So, to be clear: I want the blue bar to fill the entire div, so that ASD is in the top of it.
Update: when I change the height of the SVG from height="100%" to height="26px", then it looks like this:
I am almost there, but still not there.
and when changing width and height of svg element both to 100%, it looks like this which is not correct:

I solved my problem with CSS background-size: 100% 100%.

Resources