Re: SVG - links?

Andrew
 
Thanks for this - I guess I will have to brush up on the use
of the "transform" - I assume the sample code you give below
can also work with metric units (mm or cm).  That is, one
can "translate" using something like:
  translate(6cm,2cm)?
Of course, the scale would work the same, regardless of the
units for the graphical element. 
 
Thanks again
Derek

>>> <AndrewWatt2001@aol.com> 06/03/2003 12:34:51 >>>
In a message dated 06/03/2003 09:51:18 GMT Standard Time,
DHohls@csir.co.za writes:



Andrew

Thanks for this - yes, it does produce what I want, but misses
what I am trying to achieve.

I only want to create *one* <rect> 

You had three in your original code, so I assumed that was what you
intended.

and then be able to move 
*and* resize or recolor it as I need; otherwise there is little or
no point in having the <use> element at all, that I can see, and
the SVG agains becomes long-winded and harder to maintain.

Can you help with this approach

Something like this?

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="600" height="400"
xmlns="http://www.w3.org/2000/svg">
<desc>Local URI references within ancestor's 'defs' element.</desc>
<defs>
  <linearGradient id="Gradient01">
   <stop offset="20%" stop-color="#39F" />
   <stop offset="90%" stop-color="#F3F" />
  </linearGradient>
    <linearGradient id="Gradient02">
   <stop offset="20%" stop-color="#990066" />
   <stop offset="50%" stop-color="#CCCCCC" />
   <stop offset="90%" stop-color="#660099" />
  </linearGradient>
  <rect id="rect1" x="-60" y="-20" width="120" height="40"  />
</defs>
<!-- test xlink -->
<use xlink:href="#rect1" fill="url(#Gradient01)"
transform="translate(100,60)"/>
<use xlink:href="#rect1" fill="url(#Gradient01)"
transform="scale(0.33,1) translate(180,110) "  />
<use xlink:href="#rect1" y="2.2cm" fill="url(#Gradient02)"
transform="scale(1,4) translate(100, -25)" />
<!-- Show outline of canvas using 'rect' element -->
<rect x="0" y="0" width="598" height="398"
   fill="none" stroke="blue" stroke-width="1" />
</svg>


or, failing that point me to

a reasonable description of the role and limits(?) of  the <use>
element?

I don't know of a description of the <use> element that is complete and
"reasonable". Chapter 5.6 of the SVG 1.0 Recommendation certainly isn't
"reasonable" in terms of comprehensibility for many readers.

I have written a couple of short tutorials on the <use> element in
Designing SVG Web Graphics and in SVG Unleashed but those descriptions
are introductions to it, making no attempt to be exhaustive.

I hope that helps.

Andrew Watt


Thanks
Derek



-- 
This message has been scanned for viruses and dangerous content by 
MailScanner, and is believed to be clean.

"The CSIR exercises no editorial control over E-mail messages and/or
attachments thereto/links referred to therein originating in the
organisation and the views in this message/attachments thereto are
therefore not necessarily those of the CSIR and/or its employees.  
The sender of this e-mail is, moreover, in terms of the CSIR's Conditions
of Service, subject to compliance with the CSIR's internal E-mail and 
Internet Policy."