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