Third release of Constraint SVG browser

The third release of the SVG with constraints browser, based on Batik,
is now available.  For those unfamiliar with the project, CSVG is an
extension to SVG that allows attributes to be specified in terms of
expressions to be evaluated at display time.  These simple one-way
constraints allow a great amount of adaptivity to be built in to
documents to account for, for example, canvas dimensions, language, text
size, etc.

Changes from previous versions:

  - A major change from the second release of the CSVG browser is
    that the specification constraints is now backwards compatible with
    standard SVG, so documents can be authored which will still be
    displayed in standard SVG browsers. This example old CSVG code:

      <circle id="c" cx="100" cy="100" r="50"/>
      <rect x="id('c')/@cx" y="id('c')/@cy" width="100" height="100"/>
    
    would now be written as this:

      <circle id="c" cx="100" cy="100" r="50"/>
      <rect width="100" height="100">
        <c:constraint attributeName="x" value="id('c')/@cx"/>
        <c:constraint attributeName="y" value="id('c')/@cy"/>
      </rect>
    
    The new syntax is more verbose, but retains compatibility with non-CSVG
    browsers.  The syntax is also similar to SMIL animation and conceptually
    modifies the document in a similar way.

  - All animatable attributes can now be specified with constraints.
    Dependency tracking has been rewritten and works for all XPath
    expressions, not just simple ones.

  - Attribute types are now handled correctly.  For example, two
    SVGLength values can be added together:

      <circle id="c1" cx="100" cy="100" r="50"/>
      <rect width="100" height="100">
        <c:constraint attributeName="cx" 
	              value="id('c1')/@cx + id('c1')/@r"/>
        <c:constraint attributeName="cy" 
	              value="id('c1')/@cy + id('c1')/@r"/>
      </rect>

  - Templates use the new RCC-XSLT syntax suggested in the latest SVG 1.2
    working draft.  (Only a transformer element with type text/xsl is
    supported; prototype and handler elements are not.)

  - Animation can be specified as expressions in terms of the time since
    document load, returned by the CSVG function c:time().  For example:

      <rect x="0" y="0" width="100" height="100">
        <!-- move 20 units every second -->
        <c:constraint attributeName="x" value="20 * c:time()"/>
      </rect>

    This method can also be used to animate attributes of custom
    elements.

      <extensionDefs namespace="http://www.example.org/test">
        <xsl:stylesheet id="xsl" version="1.1">
          <xsl:template match="test:doubleCircle">
  	  <circle r="10" fill="none" stroke="black" stroke-width="1">
  	    <c:constraint attributeName="cx" value="c:Length(c:instance()/@cx)"/>
  	    <c:constraint attributeName="cy" value="c:Length(c:instance()/@cy)"/>
  	    <c:constraint attributeName="r" value="c:Length(c:instance()/@r) + 3"/>
  	  </circle>
  	  <circle r="10" fill="none" stroke="black" stroke-width="1">
  	    <c:constraint attributeName="cx" value="c:Length(c:instance()/@cx)"/>
  	    <c:constraint attributeName="cy" value="c:Length(c:instance()/@cy)"/>
  	    <c:constraint attributeName="r" value="c:Length(c:instance()/@r)"/>
  	  </circle>
  	</xsl:template>
        </xsl:stylesheet>
        
        <elementDef>
          <transformer xlink:href="#xsl" type="text/xsl"/>
        </elementDef>
      </extensionDefs>

      <test:doubleCircle cx="100" cy="100" r="10">
        <!-- double circle grows 5 units per second -->
        <c:constraint attributeName="r" value="10 + 5 * c:time()"/>
      </test:doubleCircle>

For more information and examples, see the project web site:

  http://www.csse.monash.edu.au/~clm/csvg/

Cameron

-- 
Cameron McCormack
|  Web: http://mcc.id.au/
|  ICQ: 26955922

Received on Thursday, 26 February 2004 09:54:58 UTC