Re: <g transform="translate(x,y)"/> not working

"Peter Thompson [email protected] [svg-developers]" <[email protected]> Wed, 25 Jun 2014 08:15:36 -0700
Newsgroups gmane.text.xml.svg.devel
Message-ID <[email protected]> 
If you haven't solved this already, the group elements, as you've written them, don't include the line elements. The following works:

<html>
<head>
 <title>Translate Test</title>
</head>
<body>
  <h1>Translate</h1>
  <svg width="700" height="500" xmlns="http://www.w3.org/2000/svg" version="1.2">

       <g transform="translate(0,0)">
       <line x1="10" y1="80" x2="80" y2="10" style="stroke:black;stroke-width:2"/>
       </g>

       <g transform="translate(100,0)">
       <line x1="10" y1="80" x2="80" y2="10" style="stroke:black;stroke-width:2"/>
       </g>

       <g transform="translate(200,0)">
       <line x1="10" y1="80" x2="80" y2="10" style="stroke:black;stroke-width:2"/>
       </g>

       <g transform="translate(300,0)">
       <line x1="10" y1="80" x2="80" y2="10" style="stroke:black;stroke-width:2"/>
       </g>

  </svg>
  <br>
</body>
</html>



On Tuesday, June 24, 2014 7:01 AM, "[email protected] [svg-developers]" <[email protected]> wrote:
 


  
I am new to svg, but it had seemed quite clear upon reading the material. Yet I am unable to make the translate work. I have refined and simplified the failure into the the following html file generated from an.erb file: Instead of 4 lines offset from each other by 100, I get a single line, as each overwrites the other. What am I doing wrong? The browser is Firefox 29.0.1

Thank you. 


<html>
<head>
 <title>Translate Test</title>
</head>
<body>
  <h1>Translate</h1>
  <svg width="700" height="500" xmlns="http://www.w3.org/2000/svg" version="1.2">

       <g transform="translate(0,0)"/>
       <line x1="10" y1="80" x2="80" y2="10" style="stroke:black;stroke-width:2"/>
       </g>

       <g transform="translate(100,0)"/>
       <line x1="10" y1="80" x2="80" y2="10" style="stroke:black;stroke-width:2"/>
       </g>

       <g transform="translate(200,0)"/>
       <line x1="10" y1="80" x2="80" y2="10" style="stroke:black;stroke-width:2"/>
       </g>

       <g transform="translate(300,0)"/>
       <line x1="10" y1="80" x2="80" y2="10" style="stroke:black;stroke-width:2"/>
       </g>

  </svg>
  <br>
</body>
</html>