Loading ...
Sorry, an error occurred while loading the content.

Dynamic SVG size

Expand Messages
  • eldlejon <eldlejon@hotmail.com>
    I want to include an SVG diagram in my FO output at several places and at different sizes. My problem is that I want the diagram to scale to the width and
    Message 1 of 3 , Feb 25, 2003
    • 0 Attachment
      I want to include an SVG diagram in my FO output at several places
      and at different sizes. My problem is that I want the diagram to
      scale to the width and height given in the fo:external-graphic. For
      testing I wrote the following HTML:

      <HTML>
      <HEAD>
      <TITLE>Testing absolute width and height</TITLE>
      </HEAD>
      <BODY BGColor="#c0c0c0">
      <EMBED Src="test.svg" Type="image/svg+xml" Width="120" Height="40">
      </BODY>
      </HTML>

      with the file test.svg looking like this:

      <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="10mm"
      onload="initialize(evt)">
      <title>Width and Height test</title>
      <g id="graphics" transform="translate(20, 20)">
      <path d="M 0 0 H -5 5 V -5 5" style="fill:none;stroke:black"/>
      </g>
      <text id="label" x="30" y="24" style="font-weight:bold;text-
      anchor:start;font-size:11"/>
      <script type="text/ecmascript">
      <![CDATA[
      // ==== document initalization ====
      function initialize(event) {
      var document = event.getTarget().getOwnerDocument();
      var label = document.getElementById("label");
      var width = event.getTarget().getAttribute("width");
      var height = event.getTarget().getAttribute("height");
      var text = document.createTextNode(width + " x " + height);
      label.appendChild(text);
      }
      ]]>
      </script>
      </svg>

      Now I realize this is probably a question better suited for an SVG
      forum, but I tried a couple and got no answers. How should I
      initialize the variables width and height in the ecmascript section
      for them to contain 120 and 40 from the example above?

      Any help or pointers to SVG forums are welcome,

      Lars
    • bryan
      Basically you re gonna have to use an fo:instream-foreign-object Then use the document() function to get ahold of your svg, then run templates against the svg
      Message 2 of 3 , Feb 25, 2003
      • 0 Attachment
        Basically you're gonna have to use an fo:instream-foreign-object
        Then use the document() function to get ahold of your svg, then run
        templates against the svg copying things that you want to be the same
        and altering the things you want different, i.e. the size.
      • eldlejon <eldlejon@hotmail.com>
        My problem then is that I want the diagrams on the same page as a few tables, where the table data is fed from one xml file and the diagram data is fed from
        Message 3 of 3 , Feb 27, 2003
        • 0 Attachment
          My problem then is that I want the diagrams on the same page as a
          few tables, where the table data is fed from one xml file and the
          diagram data is fed from another. I'm going to sit down and have a
          look at how I could incorporate the two steps differently, and if
          possible inserting the svg instead of using fo:external-graphic.

          Thanks,
          Lars

          --- In XSL-FO@yahoogroups.com, "bryan" <bry@i...> wrote:
          > Basically you're gonna have to use an fo:instream-foreign-object
          > Then use the document() function to get ahold of your svg, then run
          > templates against the svg copying things that you want to be the
          same
          > and altering the things you want different, i.e. the size.
        Your message has been successfully submitted and would be delivered to recipients shortly.