As I have demonstrated in this fiddle, I want SVG Cirlce to enlarge when hovered over it. But at the same time, I want to write some text over the circle (Eg. in the fiddle, "Hello" and "World").
I want that for user, text and circle should look as if they are the same entity. And all the time he/she has cursor over the circle, the circle should remain enlarged.
Please Run Quick Demo:
div,
svg {
background-color: grey;
height: 100px;
width: 600px;
}
<h1> test </h1>
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle id="C10" cx="50" cy="50" r="35" fill="red">Red</circle>
<animate xlink:href="#C10" attributeName="r" dur="0.2s" values="35;45;42" keyTimes="0;0.75;1" begin="mouseover" calcMode="linear" fill="freeze" />
<animate xlink:href="#C10" attributeName="r" dur="0.1s" values="42;35" keyTimes="0;1" begin="mouseout" calcMode="linear" fill="freeze" />
<circle id="C11" cx="150" cy="50" r="35" fill="green">Green</circle>
<animate xlink:href="#C11" attributeName="r" dur="0.2s" values="35;45;42" keyTimes="0;0.75;1" begin="mouseover" calcMode="linear" fill="freeze" />
<animate xlink:href="#C11" attributeName="r" dur="0.1s" values="42;35" keyTimes="0;1" begin="mouseout" calcMode="linear" fill="freeze" />
<text x="150" y="53" text-anchor="middle" font-family="Verdana" font-size="18" fill="white">Hello</text>
<circle id="C12" cx="250" cy="50" r="35" fill="orange"></circle>
<animate xlink:href="#C12" attributeName="r" dur="0.2s" values="35;45;42" keyTimes="0;0.75;1" begin="mouseover" calcMode="linear" fill="freeze" />
<animate xlink:href="#C12" attributeName="r" dur="0.1s" values="42;35" keyTimes="0;1" begin="mouseout" calcMode="linear" fill="freeze" />
<text id="T12" x="250" y="53" text-anchor="middle" font-family="Verdana" font-size="18" fill="white">World</text>
<set xlink:href="#C12" attributeName="r" to="42" begin="T12.mouseover" />
</svg>
</div>
But issue I am facing is, as we hover the text, the 'circle.mouseout' animation is triggered, and the animation written for hover over the circle ends. And when we hover from text part to circle part (visually still within the circle), The animation for 'circle.mouseover' get restarted.
I have tried a solution in third (orange circle) - hover over text resizes the circle, but that is not giving desired result.
Please help. Solution using CSS / JS also will do. Please fork the fiddle with your solution so I can understand it better :) :)
Use pointer-events: none to make text elements "transparent" to your hovering.
div,
svg {
background-color: grey;
height: 100px;
width: 600px;
}
text {
pointer-events: none;
}
<h1> test </h1>
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle id="C10" cx="50" cy="50" r="35" fill="red">Red</circle>
<animate xlink:href="#C10" attributeName="r" dur="0.2s" values="35;45;42" keyTimes="0;0.75;1" begin="mouseover" calcMode="linear" fill="freeze" />
<animate xlink:href="#C10" attributeName="r" dur="0.1s" values="42;35" keyTimes="0;1" begin="mouseout" calcMode="linear" fill="freeze" />
<circle id="C11" cx="150" cy="50" r="35" fill="green">Green</circle>
<animate xlink:href="#C11" attributeName="r" dur="0.2s" values="35;45;42" keyTimes="0;0.75;1" begin="mouseover" calcMode="linear" fill="freeze" />
<animate xlink:href="#C11" attributeName="r" dur="0.1s" values="42;35" keyTimes="0;1" begin="mouseout" calcMode="linear" fill="freeze" />
<text x="150" y="53" text-anchor="middle" font-family="Verdana" font-size="18" fill="white">Hello</text>
<circle id="C12" cx="250" cy="50" r="35" fill="orange"></circle>
<animate xlink:href="#C12" attributeName="r" dur="0.2s" values="35;45;42" keyTimes="0;0.75;1" begin="mouseover" calcMode="linear" fill="freeze" />
<animate xlink:href="#C12" attributeName="r" dur="0.1s" values="42;35" keyTimes="0;1" begin="mouseout" calcMode="linear" fill="freeze" />
<text id="T12" x="250" y="53" text-anchor="middle" font-family="Verdana" font-size="18" fill="white">World</text>
<set xlink:href="#C12" attributeName="r" to="42" begin="T12.mouseover" />
</svg>
</div>
Related
Is it possible to vertically center align all the rects inside a tag without having to adjust the y attributes on <rect>? (see snippet for example)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
<g fill="black">
<rect x="10" y="1" width="6" height="5" />
<rect x="20" y="1" width="6" height="10" />
<rect x="30" y="1" width="6" height="20" />
<rect x="40" y="1" width="6" height="5" />
<rect x="50" y="1" width="6" height="15" />
</g>
</svg>
<h3>desired result</h3>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
<g fill="black">
<rect x="10" y="8" width="6" height="5" />
<rect x="20" y="6" width="6" height="10" />
<rect x="30" y="1" width="6" height="20" />
<rect x="40" y="8" width="6" height="5" />
<rect x="50" y="4" width="6" height="15" />
</g>
</svg>
No, it's not possible to center align <rect> elements.
But it is possible to center-align <line> elements and give them a stroke-width (note the viewBox is vertically centered around 0):
<svg viewBox="0 -19 225 38" width="100%" height="100%">
<g stroke="black">
<line x1="10" x2="16" stroke-width="5" />
<line x1="20" x2="26" stroke-width="10" />
<line x1="30" x2="36" stroke-width="20" />
<line x1="40" x2="46" stroke-width="5" />
<line x1="50" x2="56" stroke-width="15" />
</g>
</svg>
You could also achieve vertically centered <rect> elements by setting a transform: translate(0, -50%) css rule.
This approach also requires a transform-box: fill-box; (or content-box) property.
All <rect>elements get a y="50%" attribute to start at the vertical center of the svg viewBox.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" width="100%" height="100%" style="border:1px solid #ccc">
<style>
rect {
transform: translate(0, -50%);
transform-origin: center;
transform-box: fill-box;
}
</style>
<g fill="black" >
<rect x="10" y="50%" width="6" height="5" />
<rect x="20" y="50%" width="6" height="10" />
<rect x="30" y="50%" width="6" height="20" />
<rect x="40" y="50%" width="6" height="5" />
<rect x="50" y="50%" width="6" height="15" />
</g>
</svg>
Browser support for transform-box is decent. (See caniuse).
However, if you need legacy browser (e.g. ie11) support, #ccprog's answer is a more robust solution.
Is it possible to use CSS variables (analogue to e.g. opacity in style="opacity:var(--QQQ_SOMETHING_AAA, 1)" and .ZZZ_RECTANGLES{--QQQ_SOMETHING_AAA: 0.7;} to tweak the SVGS's TITLE (description on hover <title></title>) contents?
I'm looking for something that will use only SVG1.1 features and SMIL/CSS, so no other plug-ins that might worsen cross-browser compatibility.
Here's a MWE code snippet:
.HIDDEN_LAYER{
visibility:hidden;
opacity:0;
}
.CLICKME_TICKBOX{
fill:white;
stroke:black;
}
.CLICKED_TICKBOX{
fill:white;
stroke:black;
}
.CLICKME_TEXTS{
font-family:sans-serif;
font-size:16px;
}
.CLICKED_TEXTS{
font-family:sans-serif;
font-size:16px;
stroke:black;
stroke-width:0.5;
}
.BOTTOM-LAYER_RECTANGLES{
fill:white;
stroke:black;
}
.ZZZ_RECTANGLES{
visibility:hidden;
cursor:help;
fill:yellow;
stroke:black;
--QQQ_SOMETHING_AAA: 0.7;
--QQQ_SOMETHING_BBB: 0.2;
}
.FFF_RECTANGLES{
visibility:hidden;
cursor:help;
fill:red;
stroke:black;
--PPP_SOMETHING_AAA: 0.2;
--PPP_SOMETHING_BBB: 0.7;
}
.LEGENDBOX_ZZZ{
fill:yellow;
stroke:black;
}
.LEGENDBOX_FFF{
fill:red;
stroke:black;
}
.LEGENDS{
cursor:pointer;
}
<svg id="SVG"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1320"
height="1125"
viewBox="-15 -45 1350 1155">
<symbol id="SOMETHING_AAA">
<use
xlink:href="#RECTANGLE"
transform="translate(637.5, 25)"
style="
opacity:var(--QQQ_SOMETHING_AAA, 1);
fill-opacity:var(--PPP_SOMETHING_AAA, 1)
">
</use>
</symbol>
<symbol id="SOMETHING_BBB">
<use
xlink:href="#RECTANGLE"
transform="translate(15, 215)"
style="
opacity:var(--QQQ_SOMETHING_BBB, 1);
fill-opacity:var(--PPP_SOMETHING_BBB, 1)
">
</use>
</symbol>
<g class="BOTTOM-LAYER_RECTANGLES">
<use xlink:href="#SOMETHING_AAA" />
<use xlink:href="#SOMETHING_BBB" />
</g>
<g class="ZZZ_RECTANGLES">
<use xlink:href="#SOMETHING_AAA">
<title>Something here 111.</title>
</use>
<use xlink:href="#SOMETHING_BBB">
<title>Something here 222.</title>
</use>
<set
to="visible"
attributeType="CSS"
attributeName="visibility"
end="CLICKED_ZZZ.click;bg.click"
begin="CLICKME_ZZZ.click" />
<set
to="1"
attributeType="CSS"
attributeName="opacity"
end="CLICKED_ZZZ.click;bg.click"
begin="CLICKME_ZZZ.click" />
</g>
<g class="FFF_RECTANGLES">
<use xlink:href="#SOMETHING_AAA">
<title>Something here 333.</title>
</use>
<use xlink:href="#SOMETHING_BBB">
<title>Something here 444.</title>
</use>
<set
to="visible"
attributeType="CSS"
attributeName="visibility"
end="CLICKED_DDD.click;bg.click"
begin="CLICKME_DDD.click" />
<set
to="1"
attributeType="CSS"
attributeName="opacity"
end="CLICKED_DDD.click;bg.click"
begin="CLICKME_DDD.click" />
</g>
<g id="LEGENDS"
class="LEGENDS"
transform="translate(15, -15)">
<g id="ZZZ">
<g id="CLICKME_ZZZ">
<rect id="CLICKME_TICKBOX_ZZZ"
class="CLICKME_TICKBOX"
x="0"
y="0"
width="15"
height="15">
</rect>
<use id="CLICKME_LEGENDBOX_ZZZ"
class="LEGENDBOX_ZZZ"
x="30"
y="-5"
xlink:href="#LEGENDBOX">
</use>
<text id="CLICKME_TEXT_ZZZ"
class="CLICKME_TEXTS"
x="65"
y="12.5">
Click me
</text>
</g>
<g id="CLICKED_ZZZ"
class="HIDDEN_LAYER">
<use id="CLICKED_TICKBOX_ZZZ"
x="0"
y="0"
xlink:href="#CLICKED_TICKBOX">
</use>
<use id="CLICKED_LEGENDBOX_ZZZ"
class="LEGENDBOX_ZZZ"
x="30"
y="-5"
xlink:href="#LEGENDBOX">
</use>
<text id="CLICKED_TEXT_ZZZ"
class="CLICKED_TEXTS"
x="65"
y="12.5">
Click me
</text>
<set
to="visible"
attributeType="CSS"
attributeName="visibility"
end="CLICKED_ZZZ.click;bg.click"
begin="CLICKME_ZZZ.click" />
<set
to="1"
attributeType="CSS"
attributeName="opacity"
end="CLICKED_ZZZ.click;bg.click"
begin="CLICKME_ZZZ.click" />
</g>
<animate id="ZZZ_ANIMATE"
fill="freeze"
dur="3s"
keyTimes="0;1"
values="0;1"
attributeType="CSS"
attributeName="opacity" />
</g>
<g id="DDD"
transform="translate(0,40)">
<g id="CLICKME_DDD">
<rect id="CLICKME_TICKBOX_FFF"
class="CLICKME_TICKBOX"
x="0"
y="0"
width="15"
height="15">
</rect>
<use id="CLICKME_LEGENDBOX_FFF"
class="LEGENDBOX_FFF"
x="30"
y="-5"
xlink:href="#LEGENDBOX">
</use>
<text id="CLICKME_TEXT_FFF"
class="CLICKME_TEXTS"
x="65"
y="12.5">
Click me
</text>
</g>
<g id="CLICKED_DDD"
class="HIDDEN_LAYER">
<use id="CLICKED_TICKBOX_FFF"
x="0"
y="0"
xlink:href="#CLICKED_TICKBOX">
</use>
<use id="CLICKED_LEGENDBOX_FFF"
class="LEGENDBOX_FFF"
x="30"
y="-5"
xlink:href="#LEGENDBOX">
</use>
<text id="CLICKED_TEXT_FFF"
class="CLICKED_TEXTS"
x="65"
y="12.5">
Click me
</text>
<set
to="visible"
attributeType="CSS"
attributeName="visibility"
end="CLICKED_DDD.click;bg.click"
begin="CLICKME_DDD.click" />
<set
to="1"
attributeType="CSS"
attributeName="opacity"
end="CLICKED_DDD.click;bg.click"
begin="CLICKME_DDD.click" />
</g>
<animate id="DDD_ANIMATE"
fill="freeze"
dur="3s"
keyTimes="0;1"
values="0;1"
attributeType="CSS"
attributeName="opacity" />
</g>
</g>
<defs id="DEFINITIONS">
<rect id="RECTANGLE"
width="85"
height="95">
</rect>
<rect id="RECTANGLE_YELLOW"
width="42.5"
height="95">
</rect>
<rect id="LEGENDBOX"
x="0"
y="0"
width="25"
height="25">
</rect>
<path id="CLICKED_TICKBOX"
class="CLICKED_TICKBOX"
d="M 0,0 15,15 M 0,15 15,0 M 0,0 15,0 15,15 0,15 Z"/>
</defs>
It would be nice if the
<use
xlink:href="#RECTANGLE"
transform="translate(15, 215)"
style="
opacity:var(--QQQ_SOMETHING_BBB, 1);
fill-opacity:var(--PPP_SOMETHING_BBB, 1)
">
</use>
Could also contain both of the titles:
<title>Something here 222.</title>
and
<title>Something here 444.</title>
depending on whether it is in <g class="FFF_RECTANGLES"> or <g class="ZZZ_RECTANGLES">.
So, it would be nice if the code could be altered, for example as:
<use
xlink:href="#RECTANGLE"
transform="translate(15, 215)"
style="
opacity:var(--QQQ_SOMETHING_BBB, 1);
fill-opacity:var(--PPP_SOMETHING_BBB, 1)"
title=:var(--SSS_SOMETHING, Or else it will be this.);
var(--TTT_SOMETHING, Or else it will be that.)"
">
</use>
The title could then be stated in:
.ZZZ_RECTANGLES{
--QQQ_SOMETHING_AAA: 0.7;
--QQQ_SOMETHING_BBB: 0.2;
--SSS_SOMETHING: Something here 222.;
}
and
.FFF_RECTANGLES{
--PPP_SOMETHING_AAA: 0.2;
--PPP_SOMETHING_BBB: 0.7;
--TTT_SOMETHING: Something here 444.;
}
Titles in SVG are elements, not attributes. So I don't believe there is any feaible way to achieve what you want using only CSS.
Since JS is universally supported, I assume you wouldn't have objection to using that to achieve this?
// Take the text typed into the input box, and use it for the tootip for the red rectangle
document.getElementById("title-input").addEventListener("input", function(evt) {
setTitleText("rect-title", this.value);
});
function setTitleText(elementId, newText) {
document.getElementById(elementId).textContent = newText;
}
<svg>
<rect y="50" width="200" height="50" fill="red">
<title id="rect-title">Default title</title>
</rect>
</svg>
<p>Enter some text to use as a title tooltip for the rect</p>
<input type="text" id="title-input"/>
Please look at eaExperiment. I want to make a definition which takes StartArrow definition and rotates it by 180 degrees.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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" width="450" height="400" version="1.1">
<style type="text/css">
<![CDATA[
rect {fill:white; stroke: black; stroke-width: 1;}
text {fill: black; font-family: sans-serif; font-size: 10pt}
line {stroke:black; stroke-width:2}
]]>
</style>
<defs>
<marker orient="auto" refY="0.0" refX="0.0" id="StartArrow" style="overflow:visible;">
<path style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " />
</marker>
<use id="eaExperiment" href="#StartArrow" transform="rotate(180)" />
<marker orient="auto" refY="0.0" refX="0.0" id="EndArrow" style="overflow:visible;">
<path style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " transform="rotate(180)" />
</marker>
<svg id="Box">
<rect width="100" height="85" x="1" y="1" />
<text x="5" y="20">The box</text>
<svg x="10" y="25">
<rect width="70" height="50" x="1" y="1" />
<text x="5" y="20">Box</text>
<text x="5" y="40">Contents</text>
</svg>
</svg>
</defs>
<svg>
<svg x="10" y="120">
<rect width="100" height="50" x="1" y="1" />
<text x="5" y="20">Data</text>
<text x="5" y="40">source</text>
</svg>
<svg x="150">
<use href="#Box" y="1" />
<use href="#Box" y="100" />
<use href="#Box" y="200" />
</svg>
<svg x="300" y="120">
<rect width="100" height="50" x="1" y="1" />
<text x="5" y="20">Database</text>
<text x="5" y="40">server</text>
</svg>
<line x1="100" y1="120" x2="148" y2="40" style="marker-end:url(#EndArrow)" />
<line x1="110" y1="150" x2="147" y2="150" style="marker-end:url(#EndArrow)" />
<line x1="100" y1="170" x2="148" y2="240" style="marker-end:url(#EndArrow)" />
<line x1="254" y1="40" x2="297" y2="120" style="marker-start:url(#StartArrow); marker-end:url(#EndArrow)" />
<line x1="250" y1="150" x2="297" y2="150" style="marker-start:url(#eaExperiment); marker-end:url(#EndArrow)" />
<line x1="250" y1="240" x2="297" y2="170" style="marker-end:url(#EndArrow)" />
</svg>
</svg>
I am definitely doing it wrong, but what is the right way?
You need separate <marker> elements, but their content can be reused with <use> elements. For example like this:
<defs>
<path id="arrow" style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " />
<marker orient="auto" refY="0.0" refX="0.0" id="StartArrow" style="overflow:visible;">
<use xlink:href="#arrow" />
</marker>
<marker orient="auto" refY="0.0" refX="0.0" id="EndArrow" style="overflow:visible;">
<use xlink:href="#arrow" transform="rotate(180)" />
</marker>
</defs>
(While the use of the xlink namespace with href is deprecated and also from a practical perspective no longer needed in current browsers, I tend to still use it for the sake of other renderers, Inkscape for example.)
This was originally 238, I want to change it to 266, and now I'm stuck.
I've done this before, but I forgot how to do it.
I know 7 goes into 266 38 times. See, I forgot how to do all this math, how you're supposed to calculate it.
I'm confused now.
It should all fit evenly I think, or does it not?
<svg width="266" height="266" viewBox="0 0 266 266">
<rect x="0" y="0" width="266" height="266" fill="blue" />
<rect x="7" y="7" width="224" height="224" fill="black" />
<rect x="14" y="14" width="210" height="210" fill="red" />
<rect x="21" y="21" width="196" height="196" fill="black" />
<rect x="28" y="28" width="182" height="182" fill="yellow" />
<rect x="35" y="35" width="168" height="168" fill="black" />
<rect x="42" y="42" width="154" height="154" fill="orange" />
<rect x="49" y="49" width="140" height="140" fill="black" />
<rect x="56" y="56" width="126" height="126" fill="lime" />
<rect x="63" y="63" width="112" height="112" fill="black" />
<rect x="70" y="70" width="98" height="98" fill="teal" />
<rect x="77" y="77" width="84" height="84" fill="black" />
<rect x="84" y="84" width="70" height="70" fill="silver" />
<rect x="91" y="91" width="56" height="56" fill="black" />
<rect x="98" y="98" width="42" height="42" fill="#1155cc" />
<rect x="105" y="105" width="28" height="28" fill="black" />
<rect x="112" y="112" width="14" height="14" fill="gold" />
</svg>
Assuming the original looked like this:
<svg width="238" height="238" viewBox="0 0 238 238">
<rect x="0" y="0" width="238" height="238" fill="blue" />
<rect x="7" y="7" width="224" height="224" fill="black" />
<rect x="14" y="14" width="210" height="210" fill="red" />
<rect x="21" y="21" width="196" height="196" fill="black" />
<rect x="28" y="28" width="182" height="182" fill="yellow" />
<rect x="35" y="35" width="168" height="168" fill="black" />
<rect x="42" y="42" width="154" height="154" fill="orange" />
<rect x="49" y="49" width="140" height="140" fill="black" />
<rect x="56" y="56" width="126" height="126" fill="lime" />
<rect x="63" y="63" width="112" height="112" fill="black" />
<rect x="70" y="70" width="98" height="98" fill="teal" />
<rect x="77" y="77" width="84" height="84" fill="black" />
<rect x="84" y="84" width="70" height="70" fill="silver" />
<rect x="91" y="91" width="56" height="56" fill="black" />
<rect x="98" y="98" width="42" height="42" fill="#1155cc" />
<rect x="105" y="105" width="28" height="28" fill="black" />
<rect x="112" y="112" width="14" height="14" fill="gold" />
</svg>
Then all you have to do to scale it up to 266x266 is to update the width and height attributes.
<svg width="266" height="266" viewBox="0 0 238 238">
Because the SVG has a viewBox, the browser will scale the contents automatically for you.
<svg width="266" height="266" viewBox="0 0 238 238">
<rect x="0" y="0" width="238" height="238" fill="blue" />
<rect x="7" y="7" width="224" height="224" fill="black" />
<rect x="14" y="14" width="210" height="210" fill="red" />
<rect x="21" y="21" width="196" height="196" fill="black" />
<rect x="28" y="28" width="182" height="182" fill="yellow" />
<rect x="35" y="35" width="168" height="168" fill="black" />
<rect x="42" y="42" width="154" height="154" fill="orange" />
<rect x="49" y="49" width="140" height="140" fill="black" />
<rect x="56" y="56" width="126" height="126" fill="lime" />
<rect x="63" y="63" width="112" height="112" fill="black" />
<rect x="70" y="70" width="98" height="98" fill="teal" />
<rect x="77" y="77" width="84" height="84" fill="black" />
<rect x="84" y="84" width="70" height="70" fill="silver" />
<rect x="91" y="91" width="56" height="56" fill="black" />
<rect x="98" y="98" width="42" height="42" fill="#1155cc" />
<rect x="105" y="105" width="28" height="28" fill="black" />
<rect x="112" y="112" width="14" height="14" fill="gold" />
</svg>
This is my first time diving into SVG. Is it possible to rotate this group 360 indefinitely without css or javascript/jquery? So far I have it rotating in the top left corner but I cannot seem to figure out how to center it.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="576" height="576" viewBox="0 0 288 288" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g id="seed" transform="translate(144,144)" stroke-width="2" stroke="black" fill="none" >
<circle cx="0" r="64" />
<circle cx="64" r="64" />
<circle cx="64" r="64" transform="rotate(60)" />
<circle cx="64" r="64" transform="rotate(120)" />
<circle cx="64" r="64" transform="rotate(180)" />
<circle cx="64" r="64" transform="rotate(240)" />
<circle cx="64" r="64" transform="rotate(300)" />
<circle cx="0" r="128" />
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 0 0; 360 0 0" dur="5s" repeatCount="indefinite" />
</g>
</svg>
Your animateTransform overwrites the transform on the <g> element. Looks like you want to provide an additional transform which you would with the attribute additive="sum"
<svg width="576" height="576" viewBox="0 0 288 288" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g id="seed" transform="translate(144,144)" stroke-width="2" stroke="black" fill="none" >
<circle cx="0" r="64" />
<circle cx="64" r="64" />
<circle cx="64" r="64" transform="rotate(60)" />
<circle cx="64" r="64" transform="rotate(120)" />
<circle cx="64" r="64" transform="rotate(180)" />
<circle cx="64" r="64" transform="rotate(240)" />
<circle cx="64" r="64" transform="rotate(300)" />
<circle cx="0" r="128" />
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 0 0; 360 0 0" dur="5s" additive="sum" repeatCount="indefinite" />
</g>
</svg>
PaEDIT: My bad you probally mean JavaScript.
Okay you can calculate the center with JavaScript and a nice SVG-method called getBBox();
A method to return center of SVG-elements so your should also be possible. Okay piece of code
var svg = {
getCenterPosition: function(elem) {
// use the native SVG interface to get it's boundingBox
var bbox = elem.getBBox();
// return the center of the bounding box
return {
px: (bbox.x + bbox.width / 2).toFixed(2),
py: (bbox.y + bbox.height / 2).toFixed(2)
};
}
}
svg.getCenterPosition(yourGElementAsParameter); will return the center-coordinates. (web developer console or Firebug or something) Then you can set these coordinates in your attributes but don't alter the viewbox or anything it will now rotate around it's center.