[dia] svg: more path-variations including CSS

[Hans Breuer <hans src gnome org>]

commit ef17ad0e80a61f39085c808b2489a80e71303437
Author: Hans Breuer <hans breuer org>
Date:   Fri Sep 13 19:03:43 2013 +0200

    svg: more path-variations including CSS
    
    also some more comments

 samples/path-variations.svg |   41 +++++++++++++++++++++++++++++++++++++----
 1 files changed, 37 insertions(+), 4 deletions(-)
---
diff --git a/samples/path-variations.svg b/samples/path-variations.svg
index abac41c..8d80aba 100644
--- a/samples/path-variations.svg
+++ b/samples/path-variations.svg
@@ -9,10 +9,19 @@
     <path d="M0,0 10,0 10,10 0,10 0,0z" fill="red" stroke="none" id="box-sm"/>
     <path d="M0,0h20v20h-20z" fill="lime" id="box-lime"/>
     <path d="M0,0h20v20h-20z" id="box-nofill"/>
+    <style  type="text/css">
+      .blue { fill:blue } /* class */
+      #green { fill:lime } /* id */
+      .red { fill:red } /* class */
+      .blue#yellow { fill: yellow } /* both */
+      .blue#cyan { fill: cyan } /* both */
+      #gray { fill: gray } /* both */
+      text {font-family:sans-serif; font-size:10pt; }
+    </style>
   </defs>
   <!-- the explicit fill attribute closes the path -->
   <path d="M20,20L40,20 40,40 20,40 20,20" fill="black" stroke="none" id="box11"/>
-  <!-- should be black, but is white with Dia today ... -->
+  <!-- should be black, but was white with Dia one day ... -->
   <path d="M60,20h20v20h-20z" style="stroke:none,fill:#000000" id="box21"/>
   <!-- the trailing semicolon should be optional -->
   <path d="M100,20h20v20h-20z" style="stroke:none;fill:#000000" id="box31"/>
@@ -42,27 +51,51 @@
     <use x="0" y="0" xlink:href="#box-sm" transform="translate(20,0)" id="box53"/>
   </g>
   <text x="220" y="120" fill="red">Use and transform</text>
-  <!-- Use coloring: Firefox 23.0 and Inkscape 0.48 have it all lime -->
+  <!-- Use coloring: Firefox 23.0, Inkscape 0.48 and sodipodi have it all lime -->
   <use x="20" y="140" xlink:href="#box-lime"/>
+  <!-- the already styled templated is supposed to be stronger than own fill attribute -->
   <use x="60" y="140" fill="yellow" xlink:href="#box-lime"/>
+  <!-- style from template stronger than groups fill attribute -->
   <g style="fill:cyan">
     <use x="100" y="140" xlink:href="#box-lime"/>
   </g>
+  <!-- style from template stronger than own style attribute -->
   <use x="140" y="140" style="fill:magenta" xlink:href="#box-lime"/>
+  <!-- style from template stronger than own style attribute -->
   <use x="180" y="140" xlink:href="#box-lime" style="fill:gray" />
+  <!-- lime!=green, using the latter for readability -->
   <text x="220" y="160" fill="green">Use: lime(, yellow, cyan, magenta, gray?)</text>
-  <!-- Use coloring: this time compatible -->
+  <!-- Use coloring: this time compatible: default black -->
   <use x="20" y="180" xlink:href="#box-nofill"/>
+  <!-- Use coloring by fill="yellow" -->
   <use x="60" y="180" fill="yellow" xlink:href="#box-nofill"/>
+  <!-- Dia fill style lost by <use/> design conflict -->
   <g style="fill:cyan">
     <use x="100" y="180" xlink:href="#box-nofill"/>
   </g>
+  <!-- Use style="fill:magenta" -->
   <use x="140" y="180" style="fill:magenta" xlink:href="#box-nofill"/>
+  <!-- Use style="fill:gray" attribute order does not matter -->
   <use x="180" y="180" xlink:href="#box-nofill" style="fill:gray" />
   <text x="220" y="200" fill="black">Use: black, yellow, cyan, magenta, gray</text>
 
+  <!-- CSS -->
+  <g id="gray">
+    <!-- blue by class -->
+    <path class="blue" d="M20,220h20v20h-20z"/>
+    <!-- red by class, no style for id -->
+    <path class="red" id="sthelse" d="M60,220h20v20h-20z"/>
+    <!-- green by id -->
+    <path id="green" d="M100,220h20v20h-20z"/>
+    <!-- yellow by class and id -->
+    <path class="blue" id="yellow" d="M140,220h20v20h-20z"/>
+    <!-- no such class: cyan by lookup implementation detail or gray from group id -->
+    <path class="blue#cyan" d="M180,220h20v20h-20z"/>
+    <text x="220" y="240">CSS: blue, red, lime, yellow, cyan?</text>
+  </g>
+
   <!-- more complex pathes -->
-  <g transform="translate(20,220)">
+  <g transform="translate(20,260)">
     <!-- filled with hole, watch it's color -->
     <g transform="scale(0.2,0.2)">
       <path d="M0,0 100,0 100,100 0,100z" fill="blue" id="border"/>