The code from an online SVG basic course:
<body class="site">
<figure class="theimage">
<svg id="custom-shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<defs>
<radialGradient id="sky" cx=".7" cy=".4" r=".5">
<stop stop-color="#00dffe" offset="0%" />
<stop stop-color="#38a3d1" offset="100%" />
</radialGradient>
<radialGradient id="sun">
<stop stop-color="yellow" offset="80%" />
<stop stop-color="hsla(60, 100%, 50%, 0)" offset="100%" />
</radialGradient>
</defs>
<rect fill="url(#sky)" x="0" y="0" width="500" height="500" />
<circle fill="url(#sun)" cx="350" cy="200" r="100" />
</svg>
</figure>
</body>
The cx and cy value range is 0 ~ 1, why not 500, 500 (set in viewBox)?
In the following code:
<body class="site">
<figure class="theimage">
<svg id="custom-shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle class="stroke fill" cx="40" cy="60" r="20" />
</svg>
</figure>
</body>
I guess it's because <radiaGradient> is 'nested' in the outer circle or other outer shape, so cx or cy ranges from 0 to 1 (or 100%). But I don't find some references online. Please clarify this out for me or provide me some useful links to the references? Thanks in advance.
The SVG specification may have what you are looking for:
https://www.w3.org/TR/SVG11/pservers.html#RadialGradientElementCXAttribute
"The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle."
Also, the spec contains this:
"When percentages are used with attributes that define the gradient vector, the pattern tile, the filter region or the masking region, a percentage represents the same value as the corresponding decimal value (e.g., 50% means the same as 0.5)."
(https://www.w3.org/TR/SVG11/coords.html#ObjectBoundingBoxUnits)
The default behavior of gradients is to express sizes in fractions of the bounding box of the element the gradient is applied to.
To change this behavior, you can use the attribute gradientUnits:
objectBoundingBox uses fractions of the bounding box (default).
userSpaceOnUse uses the same coordinate system as the element the gradient is applied to.
Related
I have made this shape with inkskape
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="86.708229mm"
height="108.46725mm"
viewBox="0 0 86.708229 108.46725"
version="1.1"
id="svg5"
inkscape:export-filename="bitmap.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false" />
<defs
id="defs2">
<linearGradient
inkscape:collect="always"
id="linearGradient1332">
<stop
style="stop-color:#2ebdbe;stop-opacity:1;"
offset="0"
id="stop1330" />
<stop
style="stop-color:#bbfbf2;stop-opacity:1;"
offset="1"
id="stop1328" />
</linearGradient>
<inkscape:path-effect
effect="fillet_chamfer"
id="path-effect427"
is_visible="true"
lpeversion="1"
nodesatellites_param="F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4"
unit="px"
method="auto"
mode="F"
radius="12"
chamfer_steps="4"
flexible="false"
use_knot_distance="true"
apply_no_radius="true"
apply_with_radius="true"
only_selected="false"
hide_knots="false" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient1332"
id="linearGradient1338"
x1="-8.7238359"
y1="103.88622"
x2="137.07281"
y2="33.141083"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0169463,0,0,0.56544787,9.4308219,-0.08872541)" />
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-60.976129,-17.450189)">
<path
id="path424"
style="opacity:1;fill:url(#linearGradient1338);fill-opacity:1;stroke:#ffffff;stroke-width:1.00318;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
inkscape:transform-center-x="-2.7149655"
inkscape:transform-center-y="0.12577677"
d="M 74.631466,44.717104 62.421924,34.403638 a 2.6778389,2.6778389 90.043215 0 1 0.0031,-4.093976 L 74.671628,19.996493 a 8.6973678,8.6973678 159.95323 0 1 5.603571,-2.044714 l 48.153211,0.0067 a 8.6807368,8.6807368 20.098102 0 1 5.60047,2.049272 l 12.20963,10.313627 a 2.6778292,2.6778292 90.04357 0 1 -0.003,4.093967 l -12.24664,10.313026 a 8.6974755,8.6974755 159.95346 0 1 -5.60359,2.044695 l -48.153211,-0.0067 a 8.680796,8.680796 20.097976 0 1 -5.600483,-2.049262 z"
sodipodi:nodetypes="ccccccc"
inkscape:path-effect="#path-effect427"
inkscape:original-d="M 77.056949,46.765923 59.996441,32.354819 77.100199,17.951336 l 54.503211,0.0076 17.06057,14.411285 -17.10382,14.403302 z"
inkscape:export-filename=".\path424.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96" />
</g>
</svg>
and the shape is ok But the overall height is so much more that the shape
in this picture I've opened it in browser and as you see the height is 409.95px
that is not desirable
how can I remove the extra height of that ?
just some bela bela to let me post this
just some bela bela to let me post this
just some bela bela to let me post this
Remove the width and the height attributes from <svg> and alter the viewBox so that it matches the size of the content.
In this example I also removed the transform attribute from the <g> and replaced the path itself using the tool SvgPathEditor.
Now the path takes up 100% of the box and the aspect ratio matches the content.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
viewBox="0 0 86 29"
version="1.1"
id="svg5"
inkscape:export-filename="bitmap.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false" />
<defs
id="defs2">
<linearGradient
inkscape:collect="always"
id="linearGradient1332">
<stop
style="stop-color:#2ebdbe;stop-opacity:1;"
offset="0"
id="stop1330" />
<stop
style="stop-color:#bbfbf2;stop-opacity:1;"
offset="1"
id="stop1328" />
</linearGradient>
<inkscape:path-effect
effect="fillet_chamfer"
id="path-effect427"
is_visible="true"
lpeversion="1"
nodesatellites_param="F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4 # F,0,0,1,0,3.175,0,4"
unit="px"
method="auto"
mode="F"
radius="12"
chamfer_steps="4"
flexible="false"
use_knot_distance="true"
apply_no_radius="true"
apply_with_radius="true"
only_selected="false"
hide_knots="false" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient1332"
id="linearGradient1338"
x1="-8.7238359"
y1="103.88622"
x2="137.07281"
y2="33.141083"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0169463,0,0,0.56544787,9.4308219,-0.08872541)" />
</defs>
<g
id="layer1">
<path
id="path424"
style="opacity:1;fill:url(#linearGradient1338);fill-opacity:1;stroke:#ffffff;stroke-width:1.00318;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="M 13.2315 26.7653 L 1.0219 16.4518 a 2.6778 2.6778 90.0432 0 1 0.0031 -4.094 L 13.2716 2.0447 a 8.6974 8.6974 159.9532 0 1 5.6036 -2.0447 l 48.1532 0.0067 a 8.6807 8.6807 20.0981 0 1 5.6005 2.0493 l 12.2096 10.3136 a 2.6778 2.6778 90.0436 0 1 -0.003 4.094 l -12.2466 10.313 a 8.6975 8.6975 159.9535 0 1 -5.6036 2.0447 l -48.1532 -0.0067 a 8.6808 8.6808 20.098 0 1 -5.6005 -2.0493 z" />
</g>
</svg>
the attribute width/height in the SVG tag force it to be that many millimeters and thus so many pixels - if you remove the attributes and view the SVG file in a browser it will take up the entire viewport dimensions .. either way the viewBox attribute needs to be precise too, or left out. Depending on your usage you may want to set width/height both to 100% and the viewBox to the SVG size of your drawing - reduce the canvas in your SVG editor (apparently Inkscape) before exporting to its minimal size.
So, if you check the fiddle, (https://jsfiddle.net/xXnikosXx/6jx2rpsf/3/)
I have an SVG image, with a couple of objects, and a mask. It's masking the text (colorful lines) which are hidden below it, and the plan was to animate their top position to make the text from below appear and the text from the top to disappear, to make a text scrolling effect. The text without the mask is shown in the image below, in case it helps.
here
I thought the text would appear when the animation occurs, but it doesnt (if you remove the mask, the text is shown and animated properly but they layers are wrong so the text appears above everything else)
I cant figure out a way to make the text animate properly using the mask, is there something i can use instead of the mask to get the same result, but without the text issue?
relevant code:
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="354" y="174" width="733" height="344">
<rect id="laptop-screen-front" x="354" y="174" width="733" height="344" fill="white" />
</mask>
<g mask="url(#mask0)">
<!-- some of the lines that represent text: -->
<g id="text-lines">
<line id="Line 3" x1="408" y1="194.5" x2="433" y2="194.5" stroke="#E06C60" stroke-width="5" />
<line id="Line 23" x1="438" y1="194.5" x2="463" y2="194.5" stroke="#D18C4C" stroke-width="5" />
<line id="Line 35" x1="469" y1="194.5" x2="542" y2="194.5" stroke="#7BC379" stroke-width="5" />
<line id="Line 36" x1="469" y1="209.5" x2="525" y2="209.5" stroke="#7BC379" stroke-width="5" />
</g>
Your code doesn't animate the mask. It attempts to animate the position of the text-lines g element. But SVG is not HTML. It is its own thing and doesn't support many common CSS properties: e.g. most relevant for you - there is no "top" property in SVG. The easiest way to do what you want is to get rid of all the CSS animations, and add a transform and a SMIL animation directly into the following part of the SVG.
<g mask="url(#mask0)">
<g id="text-lines" transform="translate(0 0)">
<animateTransform attributeName="transform" type="translate" values="0 0; 0 -150; 0 0" dur="11s" repeatCount="indefinite"/>
<line id="Line 3" x1="408" .... etc.
BTW - one of the reasons to use transforms for animation is that browsers can often optimize things by doing the animation on the GPU - so it's better than viewBox or top animations.
2 methods:
with SMIL
svg#parent {
background-color: rgba(100, 148, 237, 0.3);
}
<svg id="parent" width="200" height="100" viewBox="0 0 200 100">
<rect x="10" y="10" width="180" height="20" fill="white" />
<svg x="10" y="10" width="180" height="20" viewBox="0 0 180 20" >
<text x="20" y="15" > hello </text>
<text x="20" y="35" > world </text>
<animate attributeName="viewBox"
values="0 0 180 20; 0 20 180 20; 0 0 180 20"
begin="1s" dur="2s" repeatCount="indefinite" />
</svg>
</svg>
with javascript - requestAnimationFrame
(function()
{
const
svgInside = document.querySelector('#insideSVG')
, moving = .7 // change the value to slow down or speed up
;
let
stepVal = moving
, stepPos = 0
;
requestAnimationFrame(step)
;
function step()
{
stepPos += stepVal
if (stepPos<=0) stepVal = moving
if (stepPos>=20) stepVal = -moving
svgInside.setAttribute('viewBox',`0 ${stepPos} 180 20`)
requestAnimationFrame(step)
}
}
)()
svg#parent {
background-color: rgba(100, 148, 237, 0.3);
}
<svg id="parent" width="200" height="100" viewBox="0 0 200 100">
<rect x="10" y="10" width="180" height="20" fill="white" />
<svg x="10" y="10" width="180" height="20" viewBox="0 0 180 20"
id="insideSVG" >
<text x="20" y="15" > hello </text>
<text x="20" y="35" > world </text>
</svg>
</svg>
For your SVG the values should be around:
<svg x="354" y="174" width="733" height="344" viewBox="354 174 733 344" >
<line x1="419" y1="187.5" ..... />
/.../
<animate attributeName="viewBox"
values="354 174 733 344; 354 520 733 344; 354 174 733 344"
begin="1s" dur="8s" repeatCount="indefinite" />
</svg>
how does <animate> work ?
– Paul LeBeau
the mdn documentation is quite complete: :
SVG animation with SMIL
<animate>
do not hesitate to consult the links to additional information pages
but if you want a general vision of the animation possibilities of your SVGs, the Wikipedia page is ideal
There is even a part showing the use of the requestAnimationFrame(), which I am using here.
PS:The Whitesmith style has been around since 1978, and no, I don't use it for aesthetic reasons but because it checks that the right pairs of braces frame the right pieces of code. For the same reasons, I put the commas in front of data lines (they are invisible [and often forgotten] at the end of the line), as well as the column alignment (both in a similar way used in Haskell)
No, the K&R is not a foolproof style, nor is it more legitimate than any other.
I have a path which is similar to circle. The task is to fill the path with a color with animation. The fill animation should be in circle manner and not from top to bottom or bottom to top.
my svg code is :
<svg id="svg_circle" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox = '0 0 450 400'>
<g class="svg_circle" transform = "translate(0,0)">
<path class="path" stroke="#F0F0F0" fill="#fff" stroke-width="1" opacity="1" d="m-0.25,238.11061l88.59461,-82.21665l87.56445,86.40604l-33.99561,0.52367c2.72107,17.03346 46.55824,67.96739 105.37633,63.99055c70.95792,-4.79765 101.17847,-64.19902 103.74816,-97.50561c7.13262,-92.44812 -81.66575,-121.29229 -115.80064,-115.90062c-119.13463,18.8176 -96.38311,112.29843 -96.38311,112.29843l-50.54082,-49.76652l-46.48973,43.1249c-12.30406,-104.7234 83.23188,-194.53124 191.25985,-198.17803c97.87838,-3.30416 202.62703,53.17701 213.76024,178.57248c16.06879,180.98587 -165.14043,220.64431 -208.6094,218.37164c-143.15297,-7.48456 -189.38275,-115.91408 -199.33787,-158.14925l-39.14646,-1.57102z" id="svg_1">
<animate id="project_anim1" attributeName="fill" from="#fff" to="#4DAF4C" begin="1s" dur="1s" fill="freeze" repeatCount="1"></animate>
</path>
</g>
</svg>
The common "dasharray" line drawing technique would work for you, in combination with using the arrow shape as a mask.
This technique is described in this SO question
However, since the head of your arrow shape overlaps the tail, to get a "perfect" result, you may have to divide the sweep into two parts. You would draw the tail part with a tail mask, and then the second half of the shape (including the arrow head) with a separate mask.
Here's a rough imperfect version showing the technique.
<svg id="svg_circle" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox = '0 0 450 400'>
<defs>
<path id="arrow" stroke="#F0F0F0" fill="none" stroke-width="1" opacity="1" d="m-0.25,238.11061l88.59461,-82.21665l87.56445,86.40604l-33.99561,0.52367c2.72107,17.03346 46.55824,67.96739 105.37633,63.99055c70.95792,-4.79765 101.17847,-64.19902 103.74816,-97.50561c7.13262,-92.44812 -81.66575,-121.29229 -115.80064,-115.90062c-119.13463,18.8176 -96.38311,112.29843 -96.38311,112.29843l-50.54082,-49.76652l-46.48973,43.1249c-12.30406,-104.7234 83.23188,-194.53124 191.25985,-198.17803c97.87838,-3.30416 202.62703,53.17701 213.76024,178.57248c16.06879,180.98587 -165.14043,220.64431 -208.6094,218.37164c-143.15297,-7.48456 -189.38275,-115.91408 -199.33787,-158.14925l-39.14646,-1.57102z" id="svg_1"/>
<clipPath id="arrow-clip" clipPathUnits="userSpaceOnUse">
<use xlink:href="#arrow"/>
</clipPath>
</defs>
<g clip-path="url(#arrow-clip)">
<circle cx="244" cy="200" r="158" transform="rotate(-164,244,200)"
fill="none" stroke="#4DAF4C" stroke-width="175"
stroke-dasharray="993 993">
<animate attributeName="stroke-dashoffset" from="993" to="0" begin="1s" dur="1s" fill="freeze" repeatCount="1"/>
</circle>
</g>
<use xlink:href="#arrow"/>
</svg>
Here we are animating a really thick green line, but using your shape as a clipping path so it conforms to the shape you want.
But as I mentioned, the section where the head overlaps the end of the tail is not perfect, so you may need to divide the animation into two parts as described above.
I am trying to resize this SVG file produced using inkscape
I have tried using viewBox="0 0 h w" attribute within the <svg/> but it crops the image instead of resizing. Thanks in anticipation
Inkscape doesn't add a viewBox attribute to the files it produces. That attribute is needed for scaling to work.
The solution is to convert the width and height values to a viewBox and then alter your width and height.
So add the following to your root <svg> tag:
viewBox="0 0 205 69"
Then change your width/height. If you want double size, you could do:
width="410" height="138"
Or if you want it to fill the page or it's parent container you could do:
width="100%" height="100%"
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<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"
viewBox="0 0 205 69"
width="100%"
height="100%"
id="svg2985"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="official.svg">
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.88"
inkscape:cx="268.4359"
inkscape:cy="163.44054"
inkscape:current-layer="layer1"
inkscape:document-units="px"
showgrid="false"
inkscape:window-width="1301"
inkscape:window-height="744"
inkscape:window-x="65"
inkscape:window-y="24"
inkscape:window-maximized="1">
<sodipodi:guide
id="guide3594"
position="0,370.82039325"
orientation="0,800.0" />
<sodipodi:guide
id="guide3596"
position="0,229.17960675"
orientation="0,800.0" />
<sodipodi:guide
id="guide3598"
position="494.427191,0"
orientation="600.0,0" />
<sodipodi:guide
id="guide3600"
position="305.572809,0"
orientation="600.0,0" />
<sodipodi:guide
id="guide3602"
position="0,600.0"
orientation="0,800.0" />
<sodipodi:guide
id="guide3604"
position="600.0,0"
orientation="0,800.0" />
<sodipodi:guide
id="guide3606"
position="0,800.0"
orientation="600.0,0" />
<sodipodi:guide
id="guide3608"
position="800.0,0"
orientation="600.0,0" />
</sodipodi:namedview>
<defs
id="defs2987" />
<metadata
id="metadata2990">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
inkscape:label="Layer 1"
inkscape:groupmode="layer"
transform="translate(0,-531)">
<path
sodipodi:type="star"
style="fill:#008080;fill-opacity:1;fill-rule:evenodd;stroke:#008080;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.03921569"
id="path3003"
sodipodi:sides="3"
sodipodi:cx="208.33333"
sodipodi:cy="448.33334"
sodipodi:r1="329.16138"
sodipodi:r2="164.5807"
sodipodi:arg1="0.57255439"
sodipodi:arg2="1.6197519"
inkscape:flatsided="true"
inkscape:rounded="0.15947024"
inkscape:randomized="0"
d="M 484.99998,626.66667 C 435.74244,703.08492 -42.889814,679.63445 -84.441188,598.76703 -125.99256,517.89962 133.63227,115.11717 224.44119,119.56633 c 90.80892,4.44916 309.81634,430.68209 260.55879,507.10034 z"
inkscape:transform-center-x="-8.8816078"
inkscape:transform-center-y="-0.012778438"
transform="matrix(0.00520436,0.0991022,-0.10795132,0.00477775,212.00937,543.99054)" />
<path
sodipodi:type="star"
style="fill:#241f1c;fill-opacity:0.33333333;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.03921569"
id="path3003-6"
sodipodi:sides="3"
sodipodi:cx="208.33333"
sodipodi:cy="448.33334"
sodipodi:r1="329.16138"
sodipodi:r2="164.5807"
sodipodi:arg1="0.57255439"
sodipodi:arg2="1.6197519"
inkscape:flatsided="true"
inkscape:rounded="0.15947024"
inkscape:randomized="0"
d="M 484.99998,626.66667 C 435.74244,703.08492 -42.889814,679.63445 -84.441188,598.76703 -125.99256,517.89962 133.63227,115.11717 224.44119,119.56633 c 90.80892,4.44916 309.81634,430.68209 260.55879,507.10034 z"
inkscape:transform-center-x="-8.8816118"
inkscape:transform-center-y="-0.012779205"
transform="matrix(0.00520436,0.0991022,-0.10795132,0.00477775,213.12005,546.20636)" />
<text
xml:space="preserve"
style="font-size:16.25434494px;font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#576a6c;fill-opacity:1;stroke:none;font-family:Century Schoolbook L;-inkscape-font-specification:Century Schoolbook L Medium"
x="2.427422"
y="563.2641"
id="text3791"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan3793"
x="2.427422"
y="563.2641"
style="font-size:36.57227707px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;word-spacing:0px;fill:#576a6c;fill-opacity:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu">Akogun</tspan></text>
<text
xml:space="preserve"
style="font-size:16.25434494px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
x="186.45212"
y="409.6254"
id="text5280"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan5282"
x="186.45212"
y="409.6254" /></text>
<text
xml:space="preserve"
style="font-size:16.25434494px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#008080;fill-opacity:0.50196078;stroke:none;font-family:Sans"
x="49.39143"
y="567.16937"
id="text5284"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan5286"
x="49.39143"
y="567.16937" /><tspan
sodipodi:role="line"
id="tspan5288"
x="49.39143"
y="584.67633"
style="font-size:13.20665646px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#008080;fill-opacity:0.50196078;font-family:Ubuntu;-inkscape-font-specification:Ubuntu">P o l y m a t h</tspan></text>
<path
sodipodi:type="star"
style="fill:#241f1c;fill-opacity:0.33333333;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.03921569"
id="path3003-6-5"
sodipodi:sides="3"
sodipodi:cx="208.33333"
sodipodi:cy="448.33334"
sodipodi:r1="329.16138"
sodipodi:r2="164.5807"
sodipodi:arg1="0.57255439"
sodipodi:arg2="1.6197519"
inkscape:flatsided="true"
inkscape:rounded="0.15947024"
inkscape:randomized="0"
d="M 484.99998,626.66667 C 435.74244,703.08492 -42.889814,679.63445 -84.441188,598.76703 -125.99256,517.89962 133.63227,115.11717 224.44119,119.56633 c 90.80892,4.44916 309.81634,430.68209 260.55879,507.10034 z"
inkscape:transform-center-x="-8.8816136"
inkscape:transform-center-y="-0.012761026"
transform="matrix(0.00520436,0.0991022,-0.10795132,0.00477775,214.3031,538.55495)" />
<flowRoot
xml:space="preserve"
id="flowRoot3053"
style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
transform="matrix(0.40635864,0,0,0.40635864,0.801987,362.21684)"><flowRegion
id="flowRegion3055"><rect
id="rect3057"
width="598"
height="182"
x="102"
y="144" /></flowRegion><flowPara
id="flowPara3059" /></flowRoot> <flowRoot
style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
id="flowRoot3296"
xml:space="preserve"
transform="matrix(0.40635864,0,0,0.40635864,0.801987,362.21684)"><flowRegion
id="flowRegion3298"><rect
y="164"
x="30"
height="218"
width="502"
id="rect3300" /></flowRegion><flowPara
id="flowPara3302" /></flowRoot> </g>
</svg>
The svg/#viewBox attribute controls the range of coordinates which are shown within the viewport ( the area of the screen the svg takes up ).
The size of the viewport is determined mostly by the svg/#width and svg/#height attributes - see https://www.w3.org/TR/SVG/coords.html
The ‘width’ attribute on the outermost svg element establishes the viewport's width [...], if there are positioning properties specified on the referencing element or on the outermost svg element that are sufficient to establish the height of the viewport, then these positioning properties establish the viewport's height; otherwise, the ‘height’ attribute on the outermost svg element establishes the viewport's height.
Why am I doing wrong in the following code snnipet? Why is the rectangle not being animated in Chrome(v 39) and Firefox(v 33) after the circle ends its animation?
<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>
<svg width="500" height="350">
<circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
<rect id="blue-rectangle" width="50" height="50" x="25" y="200" fill="#0099cc"></rect>
<animate
xlink:href="#orange-circle"
attributeName="cx"
from="50"
to="450"
dur="5s"
begin="click"
fill="freeze"
id="circ-anim"/>
<animate
xlink:href="#blue-rectangle"
attributeName="x"
from="50"
to="425"
dur="5s"
begin="circ-anim.end"
fill="freeze"
id="rect-anim"/>
</svg>
<p>Click on the circle to animate it, and animate the rectangle after it.</p>
</body>
</html>
Either change the id of the circle from circ-anim to say circ and fix up the begin reference or escape the - sign and it will work.
SMIL uses + and - to indicate offsets e.g. begin="circ.end - 1" would start 1 second before the end of the circ animation ends so you can't use + or - in ids that you want to animate.
You can escape the id in SMIL via
xlink:href="#orange\-circle"
if you really want to keep the sign character.
The SMIL specification says this about parsing the begin attribute...
Build a token substring up to but not including any sign indicator (i.e. strip off any offset)...