Basically the entire day I was trying to figure out how to make circles into a separate
SVG element because originally they looked like this
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
viewBox="0 0 800 800" width="200" height="200" id="green_circle">
<circle cx="100" cy="100" r="70" fill="green"/>
<circle cx="350" cy="200" r="30" fill="black" stroke="red" stroke-width="3"/>
<circle cx="45" cy="45" r="45" fill="blue" stroke="green" stroke-width="30"/>
<circle cx="230" cy="90" r="100" fill="orange"/>
<circle cx="800" cy="800" r="10" fill="purple"/>
<!-- Place your SVG elements here... -->
</svg>
But when I had viewed the page source for your circles that were in separate SVG
elements they were written as seen below and that had confused me.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="300" height="300" id="circle_1">
<circle cx="150" cy="150" r="120"
stroke="black" stroke-width="3" fill="purple" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="300" height="300" id="circle_2">
<circle cx="150" cy="150" r="120"
stroke="black" stroke-width="3" fill="red" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="300" height="300" id="circle_3">
<circle cx="150" cy="150" r="120"
stroke="black" stroke-width="3" fill="blue" />
</svg>
Anyway, it's sort of tough to explain my thought process but when you fixed my code
it ended up looking like what I originally had.
So isn't your code 3 separate SVG elements while mine is 1?
An SVG element can be called an "image", since it holds a single vector graphics image. After your question I added viewBox attributes to each of the images, but these are a sequence of individual graphics side by side. The GDW SVG Lesson 2 also has a single image with several circle objects (elements) in it.
ReplyDeleteA few other comments:
1. Put validation links for both HTML and CSS at the bottom of your web pages. The HTML 5 validator appears to validate the embedded SVGs as well (HTML 5 is sooo cool! ;-)
2. Start to use the file system to organize your growing body of work. I created a few subdirectories for you and moved things into them, renaming javascript.html to index.html inside the javascript subdirectory, for example. Take a look around and see if you understand what I did.