XML Elves

themdg · #2 (**permalink**) 02-04-2010, 01:53 PM

Thought I'd post an update and the solution I found in case others may be interested, and to help the board be useful.

I'm sure there is a more elegant solution that a more seasoned XMLmn might know, but this worked to educate me a bit.

So, to keep my image from scaling, the x, y, width, height in the svg tag needed to remain, as did the viewbox. That is, I wanted my finished product 180x80, even though the actual content is 252x144. So the start of my svg tag looked like:

Code:

<svg x="0pt" y="0pt" width="180pt" height="80pt" viewBox="0 0 180 80"...

It should have been obvious, but after messing around with these values, and the transform in my g tag, and adding clippaths etc, it got very confusing.

In the end, the size, viewbox, and transform were the answer.

This code:

Code:

<svg x="0pt" y="0pt" width="252pt" height="144pt" viewBox="0 0 252 144" preserveAspectRatio="xMidYMid" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g transform="matrix(1 0 0 1 0 0)"> 
	<rect x="0" y="0" width="252" height="144" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>  
	<rect x="10" y="10" width="180" height="80" style="fill:blue"/>
	<rect x="20" y="20" width="160" height="60" style="fill:white"/>			
	<rect x="30" y="30" width="140" height="40" style="fill:purple"/>			
	<rect x="40" y="40" width="120" height="20" style="fill:yellow"/>
	<rect x="50" y="50" width="100" height="1" style="fill:black"/>
</g>  
</svg>

produces this:

and this code:

Code:

<svg x="0pt" y="0pt" width="180pt" height="80pt" viewBox="0 0 180 80" preserveAspectRatio="xMidYMid" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  
  
  <g transform="matrix(1 0 0 1 -10 -10)" onload="replaceText();"> 
  
<rect x="0" y="0" width="252" height="144" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>  
<rect x="10" y="10" width="180" height="80" style="fill:blue"/>
<rect x="20" y="20" width="160" height="60" style="fill:white"/>			
<rect x="30" y="30" width="140" height="40" style="fill:purple"/>			
<rect x="40" y="40" width="120" height="20" style="fill:yellow"/>
<rect x="50" y="50" width="100" height="1" style="fill:black"/>
  
  </g>  
</svg>

produces this, which is just what I want.

In the end, the only data that will change dynamically will be the two values in the transform matrix. Easy enough to do with some ecmascript, but that won't work for me. I send this svg through some internal code that converts it to a PDF and it doesn't handle the script right. So, I'll back up and change the value in my java code as I build the svg. I know you didn't care about that last part, but since it was the basis of my orig. question I thought I'd put it out there.

PS...don't mind the "pass" text in there. It was part of my ecmascript test, which I removed in the code above.