Being on the U.S. West Coast, I'm probably the only guy awake on planet
SVG at this time :) ...Are there any SVGers in Hawaii?
Anyway, I would like to further describe what it is I want to do in
animation of SVG Tiny 1.2.
OK, I want to expand and contract the size of an element based on the
user's ratio selection: 5X the size, .3X the size ? whatever.
The element will animate, in situ: i.e., it doesn't scoot across the
page but remains centered at its current location, and expands or
contracts, in the duration, and ratio, chosen by the viewer.
This can be done nicely in "big" SVG as follows:
Assume the top SVG container may have it's own viewBox, if not, the
viewBox ratios would be 1.
Top SVG container viewBox:
//---viewbox ratio pixels vs viewBox---
var svgPixWidth=parseInt(mySVG.getAttribute('width'))
var svgPixHeight=parseInt(mySVG.getAttribute('height'))
var viewBox=mySVG.getAttribute('viewBox')
if(!viewBox){vbRatioX=1;vbRatioY=1}
else
{
var vbSplit=viewBox.split(" ")
var vbWidth=parseFloat(vbSplit[2])
var vbHeight=parseFloat(vbSplit[3])
vbRatioX=vbWidth/svgPixWidth
vbRatioY=vbHeight/svgPixHeight
}
OK, now that that is taken care of...
The user then selects an element, called AnimTarget. The clone target
is required to append to the nested SVG element and be inserted at the
proper location in the container
SVG document, dumping the original
AnimTarget, which has been embraced as a clone in the nested SVG
element.
makeSvg=docSVG.createElement("svg")
cloneTarget=AnimTarget.cloneNode(true)
curX=AnimTarget.getBBox().x
curY=AnimTarget.getBBox().y
width=AnimTarget.getBBox().width
height=AnimTarget.getBBox().height
centerX=(curX+width/2)
centerY=(curY+height/2)
//--this assumes, the container viewBox has 0 0
x y values:
startX=0
startY=0
startWidth=parseInt(mySVG.getAttribute("width"))
*vbRatioX
startHeight=parseInt(mySVG.getAttribute
("height"))*vbRatioY
ratioSelect=parseFloat(ESratioValue.value)
if(ratioSelect<=1)//---decrease size
{
ESratio=1/ratioSelect
newX=-centerX*(ESratio-1)
newY=-centerY*(ESratio-1)
}
else
{
ESratio=1/ratioSelect
newX=centerX*(1-ESratio)
newY=centerY*(1-ESratio)
}
newWidth=startWidth*ESratio
newHeight=startHeight*ESratio
values=startX+" "+startY+" "+startWidth+" "+startHeight+";"+newX
+" "+newY+" "+newWidth+" "+newHeight
makeSvg=docSVG.createElement("svg")
makeAnim=docSVG.createElement("animate")
makeAnim.setAttribute("attributeName","viewBox")
makeAnim.setAttribute("values",values)
makeAnim.setAttribute("begin","click")
makeAnim.setAttribute("dur",dur)
makeAnim.setAttribute("fill","freeze")
makeSvg.appendChild(cloneTarget)
makeSvg.appendChild(makeAnim)
myLayer.insertBefore(makeSvg,AnimTarget)
myLayer.removeChild(AnimTarget)
This works just dandy in expanding/contracting the selected size of an
element in "big" SVG. I'd hate to give this up in SVG Tiny 1.2
Perchance, does anyone have a suggestion on how to do this in SVG Tiny
1.2, if, in fact, it won't accept nested SVG?
Francis
--- In svg-developers@yahoogroups.com, "Francis Hemsher"
<[EMAIL PROTECTED]> wrote:
> "Doug Schepers" wrote:
> You might want to be
> > judicious in your use of nested SVG elements, though, as they can
> decrease
> > performance in some implementations (and aren't allowed in SVG
Tiny).
>
> Hi Doug,
> Do you mean that nested SVG is not allowed in SVG Tiny 1.2?
> Gosh, I hope that is not true, because, I've just invested about 100
> hours to provide animation for SVG Tiny 1.2 that must use nested SVG.
>
> Please confirm.
>
> Thanks,
> Francis
------------------------ Yahoo! Groups Sponsor --------------------~-->
Fair play? Video games influencing politics. Click and talk back!
http://us.click.yahoo.com/T8sf5C/tzNLAA/TtwFAA/1U_rlB/TM
--------------------------------------------------------------------~->
-----
To unsubscribe send a message to: [EMAIL PROTECTED]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
