xmlgraphics-batik-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Thomas E Deweese <thomas.dewe...@kodak.com>
Subject Scaling Graphics
Date Tue, 05 Mar 2002 19:52:03 GMT
>>>>> "DS" == Swearingen, David W <dwswearingen@tasc.com> writes:

DS> I'm hoping this is the right forum for this question: We'd like to
DS> create some graphical icons in Batik for use as buttons in a web
DS> interface.  Imagine simple little icons with images of cars,
DS> people, buildings, etc, composed of lines and other primitives.
DS> We'd like to be able to dynamically scale these images.  Is there
DS> a "global" scaling feature in SVG?  All I've seen in my limited
DS> experience is individual scaling for every primitive in the
DS> drawing.

DS> E.g., I create a simple drawing of a car in JASC WebDraw.  I grab
DS> all the elements and scale them simultaneously with the mouse.
DS> WebDraw adds "transform" attributes to EACH element rather than
DS> some kind of transform tag around the entire document.  Does this
DS> mean that I can't scale the whole drawing with one simple element?

    I think you want the 'g' element (g elements can of course contain
other g elements).  You can also set an 'id' on a 'g' which helps to
identify larger objects like 'carIcon').

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
	"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="800" height="800">
     <g transform="translate(96 375) 
                   scale(0.515194 0.480445) 
                   translate(-96 -375)">
	<rect x="164" y="88" width="306" height="209"
              style="fill:rgb(0,0,255);stroke:rgb(0,0,0);stroke-width:1"/>
	<ellipse cx="456" cy="311" rx="128" ry="64"
                 style="fill:rgb(0,0,255);stroke:rgb(0,0,0);stroke-width:1"/>
	<ellipse cx="173.5" cy="98.5" rx="77.5" ry="61.5"
                 style="fill:rgb(0,0,255);stroke:rgb(0,0,0);stroke-width:1"/>
     </g>
</svg>

        You could also move the style decl up:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
	"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="800" height="800">
     <g style="fill:rgb(0,0,255);stroke:rgb(0,0,0);stroke-width:1" >
	transform="translate(96 375) scale(0.515194 0.480445) translate(-96 -375)"
        <rect x="164" y="88" width="306" height="209" />
	<ellipse cx="456" cy="311" rx="128" ry="64" />
	<ellipse cx="173.5" cy="98.5" rx="77.5" ry="61.5" />
     </g>
</svg>


There now much easier to read and maintain.

---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org


Mime
View raw message