W3C home > Mailing lists > Public > public-html-commits@w3.org > February 2010

html5/spec/images content-venn.svg,1.1,1.2

From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
Date: Wed, 17 Feb 2010 07:39:17 +0000
To: public-html-commits@w3.org
Message-Id: <E1NheVB-0004uy-NG@lionel-hutz.w3.org>
Update of /sources/public/html5/spec/images
In directory hutz:/tmp/cvs-serv18843/images

Modified Files:
	content-venn.svg 
Log Message:
Make the content venn diagram interactive. (whatwg r4754)

Index: content-venn.svg
===================================================================
RCS file: /sources/public/html5/spec/images/content-venn.svg,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -d -r1.1 -r1.2
--- content-venn.svg	29 Dec 2008 03:53:02 -0000	1.1
+++ content-venn.svg	17 Feb 2010 07:39:15 -0000	1.2
@@ -1,36 +1,272 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-250 -150 512 288" width="512" height="288">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-250 -150 1024 288" width="1000" height="288">
  <style type="text/css">
   @import url(/style/svg-color-scheme.css);
   svg     { font: bold 18px sans-serif; text-anchor: middle; }
   ellipse { fill: #005a9c; stroke: #000000; opacity: 0.67; }
-  text    { fill: #ffffff; }
+  text    { fill: #ffffff; pointer-events: none; }
+  ellipse:hover { stroke-width: 5px; }
+  ellipse:not(:hover) + foreignObject { display: none; }
+  div { font: 14px sans-serif; }
+  h1 { margin: 0 0 0.25em 0; padding: 0; font: 900 27px sans-serif; text-shadow: 0.15em 0.15em 0.2em gray; }
+  ul { margin: 0; padding: 0 0 0 1em; }
+  li { display: inline; margin: 0; padding: 0; line-height: 1.5; }
+  li:not(:last-child):after { content: ', '; }
+  span { font: italic 14px sans-serif; }
+  code { font: 1em monospace; color: orangered; }
+  p { margin: 0.75em 0 0 0; padding: 0 0 0 1em; font: italic 14px sans-serif; }
  </style>
- <g class="a" transform="translate(0, 0)">
-  <ellipse cx="2" cy="-3" rx="244" ry="132"/>
-  <text y="-97" x="12">Flow</text>
+ <g class="a" transform="translate(2, -3)">
+  <ellipse rx="244" ry="132"/>
+  <foreignObject x="250" y="-150" width="500" transform="translate(-2, 3)">
+   <div xmlns="http://www.w3.org/1999/xhtml">
+    <h1>Flow content</h1>
+    <ul>
+     <li><code>a</code></li>
+     <li><code>abbr</code></li>
+     <li><code>address</code></li>
+     <li><code>area</code>*</li>
+     <li><code>article</code></li>
+     <li><code>aside</code></li>
+     <li><code>audio</code></li>
+     <li><code>b</code></li>
+     <li><code>bdo</code></li>
+     <li><code>blockquote</code></li>
+     <li><code>br</code></li>
+     <li><code>button</code></li>
+     <li><code>canvas</code></li>
+     <li><code>cite</code></li>
+     <li><code>code</code></li>
+     <li><code>command</code></li>
+     <li><code>datalist</code></li>
+     <li><code>del</code></li>
+     <li><code>details</code></li>
+     <li><code>dfn</code></li>
+     <li><code>div</code></li>
+     <li><code>dl</code></li>
+     <li><code>em</code></li>
+     <li><code>embed</code></li>
+     <li><code>fieldset</code></li>
+     <li><code>figure</code></li>
+     <li><code>footer</code></li>
+     <li><code>form</code></li>
+     <li><code>h1</code></li>
+     <li><code>h2</code></li>
+     <li><code>h3</code></li>
+     <li><code>h4</code></li>
+     <li><code>h5</code></li>
+     <li><code>h6</code></li>
+     <li><code>header</code></li>
+     <li><code>hgroup</code></li>
+     <li><code>hr</code></li>
+     <li><code>i</code></li>
+     <li><code>iframe</code></li>
+     <li><code>img</code></li>
+     <li><code>input</code></li>
+     <li><code>ins</code></li>
+     <li><code>kbd</code></li>
+     <li><code>keygen</code></li>
+     <li><code>label</code></li>
+     <li><code>link</code>*</li>
+     <li><code>map</code></li>
+     <li><code>mark</code></li>
+     <li><code>math</code></li>
+     <li><code>menu</code></li>
+     <li><code>meta</code>*</li>
+     <li><code>meter</code></li>
+     <li><code>nav</code></li>
+     <li><code>noscript</code></li>
+     <li><code>object</code></li>
+     <li><code>ol</code></li>
+     <li><code>output</code></li>
+     <li><code>p</code></li>
+     <li><code>pre</code></li>
+     <li><code>progress</code></li>
+     <li><code>q</code></li>
+     <li><code>ruby</code></li>
+     <li><code>samp</code></li>
+     <li><code>script</code></li>
+     <li><code>section</code></li>
+     <li><code>select</code></li>
+     <li><code>small</code></li>
+     <li><code>span</code></li>
+     <li><code>strong</code></li>
+     <li><code>style</code>*</li>
+     <li><code>sub</code></li>
+     <li><code>sup</code></li>
+     <li><code>svg</code></li>
+     <li><code>table</code></li>
+     <li><code>textarea</code></li>
+     <li><code>time</code></li>
+     <li><code>ul</code></li>
+     <li><code>var</code></li>
+     <li><code>video</code></li>
+     <li><span>Text*</span></li>
+    </ul>
+    <p>* Under certain circumstances (see prose).</p>
+   </div>
+  </foreignObject>
+  <text x="10" y="-94">Flow</text>
  </g>
  <g class="b" transform="translate(127, -48.5)">
   <ellipse rx="75" ry="42.5"/>
+  <foreignObject x="250" y="-150" width="500" transform="translate(-127, 48.5)">
+   <div xmlns="http://www.w3.org/1999/xhtml">
+    <h1>Heading content</h1>
+    <ul>
+     <li><code>h1</code></li>
+     <li><code>h2</code></li>
+     <li><code>h3</code></li>
+     <li><code>h4</code></li>
+     <li><code>h5</code></li>
+     <li><code>h6</code></li>
+     <li><code>hgroup</code></li>
+    </ul>
+   </div>
+  </foreignObject>
   <text x="2" y="6">Heading</text>
  </g>
  <g class="c" transform="translate(125, 42)">
   <ellipse rx="75" ry="42.5"/>
+  <foreignObject x="250" y="-150" width="500" transform="translate(-125, -42)">
+   <div xmlns="http://www.w3.org/1999/xhtml">
+    <h1>Sectioning content</h1>
+    <ul>
+     <li><code>article</code></li>
+     <li><code>aside</code></li>
+     <li><code>nav</code></li>
+     <li><code>section</code></li>
+    </ul>
+   </div>
+  </foreignObject>
   <text x="1" y="5">Sectioning</text>
  </g>
  <g class="d" transform="translate(-113, 78)">
   <ellipse rx="117" ry="47" transform="rotate(-15)"/>
+  <foreignObject x="250" y="-150" width="500" transform="translate(113, -78)">
+   <div xmlns="http://www.w3.org/1999/xhtml">
+    <h1>Metadata content</h1>
+    <ul>
+     <li><code>base</code></li>
+     <li><code>command</code></li>
+     <li><code>link</code></li>
+     <li><code>meta</code></li>
+     <li><code>noscript</code></li>
+     <li><code>script</code></li>
+     <li><code>style</code></li>
+     <li><code>title</code></li>
+    </ul>
+   </div>
+  </foreignObject>
   <text x="-4" y="8">Metadata</text>
  </g>
  <g class="e" transform="translate(-128, -34)">
   <ellipse rx="94" ry="51"/>
+  <foreignObject x="250" y="-150" width="500" transform="translate(128, 34)">
+   <div xmlns="http://www.w3.org/1999/xhtml">
+    <h1>Interactive content</h1>
+    <ul>
+     <li><code>a</code></li>
+     <li><code>audio</code>*</li>
+     <li><code>button</code></li>
+     <li><code>details</code></li>
+     <li><code>embed</code></li>
+     <li><code>iframe</code></li>
+     <li><code>img</code>*</li>
+     <li><code>input</code>*</li>
+     <li><code>keygen</code></li>
+     <li><code>label</code></li>
+     <li><code>menu</code>*</li>
+     <li><code>object</code>*</li>
+     <li><code>select</code></li>
+     <li><code>textarea</code></li>
+     <li><code>video</code>*</li>
+    </ul>
+    <p>* Under certain circumstances.</p>
+   </div>
+  </foreignObject>
   <text x="-36" y="5">Interactive</text>
  </g>
  <g class="f" transform="translate(-40.5, -5)">
   <ellipse rx="76.5" ry="80"/>
+  <foreignObject x="250" y="-150" width="500" transform="translate(40.5, 5)">
+   <div xmlns="http://www.w3.org/1999/xhtml">
+    <h1>Phrasing content</h1>
+    <ul>
+     <li><code>a</code>*</li>
+     <li><code>abbr</code></li>
+     <li><code>area</code>*</li>
+     <li><code>audio</code></li>
+     <li><code>b</code></li>
+     <li><code>bdo</code></li>
+     <li><code>br</code></li>
+     <li><code>button</code></li>
+     <li><code>canvas</code></li>
+     <li><code>cite</code></li>
+     <li><code>code</code></li>
+     <li><code>command</code></li>
+     <li><code>datalist</code></li>
+     <li><code>del</code>*</li>
+     <li><code>dfn</code></li>
+     <li><code>em</code></li>
+     <li><code>embed</code></li>
+     <li><code>i</code></li>
+     <li><code>iframe</code></li>
+     <li><code>img</code></li>
+     <li><code>input</code></li>
+     <li><code>ins</code>*</li>
+     <li><code>kbd</code></li>
+     <li><code>keygen</code></li>
+     <li><code>label</code></li>
+     <li><code>link</code>*</li>
+     <li><code>map</code>*</li>
+     <li><code>mark</code></li>
+     <li><code>math</code></li>
+     <li><code>meta</code>*</li>
+     <li><code>meter</code></li>
+     <li><code>noscript</code></li>
+     <li><code>object</code></li>
+     <li><code>output</code></li>
+     <li><code>progress</code></li>
+     <li><code>q</code></li>
+     <li><code>ruby</code></li>
+     <li><code>samp</code></li>
+     <li><code>script</code></li>
+     <li><code>select</code></li>
+     <li><code>small</code></li>
+     <li><code>span</code></li>
+     <li><code>strong</code></li>
+     <li><code>sub</code></li>
+     <li><code>sup</code></li>
+     <li><code>svg</code></li>
+     <li><code>textarea</code></li>
+     <li><code>time</code></li>
+     <li><code>var</code></li>
+     <li><code>video</code></li>
+     <li><span title="text content">Text</span>*</li>
+    </ul>
+    <p>* Under certain circumstances; see prose.</p>
+   </div>
+  </foreignObject>
   <text x="0" y="-39.5">Phrasing</text>
  </g>
  <g class="g" transform="translate(-42, -7)">
   <ellipse rx="68" ry="22.5"/>
+  <foreignObject x="250" y="-150" width="500" transform="translate(42, 7)">
+   <div xmlns="http://www.w3.org/1999/xhtml">
+    <h1>Embedded content</h1>
+    <ul>
+     <li><code>audio</code></li>
+     <li><code>canvas</code></li>
+     <li><code>embed</code></li>
+     <li><code>iframe</code></li>
+     <li><code>img</code></li>
+     <li><code>math</code></li>
+     <li><code>object</code></li>
+     <li><code>svg</code></li>
+     <li><code>video</code></li>
+    </ul>
+   </div>
+  </foreignObject>
   <text x="0" y="7">Embedded</text>
  </g>
 </svg>
\ No newline at end of file
Received on Wednesday, 17 February 2010 07:39:19 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 17 February 2010 07:39:27 GMT