W3C home > Mailing lists > Public > www-svg@w3.org > February 2004

Re: Third release of Constraint SVG browser

From: Doug Schepers <doug@schepers.cc>
Date: Thu, 26 Feb 2004 16:16:30 -0500
Message-ID: <00c501c3fcad$ce7c72f0$2dea1a42@Raven>
To: <www-svg@w3.org>

Cameron-

As I wrote on SVG-Dev:

"I have not had the leisure to check out your browser, but I did read an
early version of your work, and I think it's brilliant and very useful.
IIRC, there has been some speculation for the inclusion of XPath in SVG, and
I think that the WG would do well to be inspired by your extensions."

I especially like that your content is now backwards-compatible with other
viewers, though the necessary verbosity make me hope something like this, in
the future, will be available in standard SVG, at least in certain profiles.

I should read more before speculating, but I can't help but mention that
this seems like it would make a table/grid be a snap.

I may be reading too much into it, or speculating too far, but adding
limited script elements could even be used for pseudo-declarative
drag-and-drop:
     <rect x="40" y="35" width="100" height="100" c:draggable="false">
         <set c:nameSpace="c" attributeName="draggable" begin="mousedown"
value="true"/>
         <set c:nameSpace="c" attributeName="draggable" begin="mouseup"
value="false"/>
         <c:constraint attributeName="x" value="evt.clientX"/>
         <c:constraint attributeName="y" value="evt.clientY"/>
     </rect>
This is an instance where having the constraints as child elements is
actually useful, rather than merely verbose. I'm not sure that this is a
useful example, but other things like it would certainly be... nice work,
Cameron et al.

How CPU-intensive is this approach? I know that there was some concern that
XPath would be "costly".

Regards-
-Doug

Cameron McCormack wrote:
|
| 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 16:16:36 GMT

This archive was generated by hypermail 2.3.1 : Friday, 8 March 2013 15:54:26 GMT