I sometimes use these "Learning Logs" to help me keep my thoughts collected while I work. Feel free to check out my thought process, but don't expect a polished article.
First thing I learned today
Opening index.php in a browser without running a PHP server means that all elements that include any PHP will become non-functional, while all other elements will function (display) as normal.<svg width = "400" height = "100">
<rect x="<?php echo $strokeWidth/2?>" y="<?php echo $strokeWidth/2?>" width="<?php echo $length?>" height="<?php echo $length?>"
style="fill:blue;stroke:black;stroke-width:<?php echo $strokeWidth?>;fill-opacity:.7;stroke-opacity:1" />
<rect x="<?php echo $coord2?>" y="<?php echo $strokeWidth/2?>" width="<?php echo $length?>" height="<?php echo $length?>"
style="fill:yellow;stroke:black;stroke-width:<?php echo $strokeWidth?>;fill-opacity:.7;stroke-opacity:1" />
<rect x="<?php echo 2 * $coord2 -1 ?>" y="<?php echo $strokeWidth/2?>" width="<?php echo $length?>" height="<?php echo $length?>"
style="fill:green;stroke:black;stroke-width:<?php echo $strokeWidth?>;fill-opacity:.7;stroke-opacity:1" />
<rect x="<?php echo 3*$coord2 -2?>" y="<?php echo $strokeWidth/2?>" width="<?php echo $length?>" height="<?php echo $length?>"
style="fill:red;stroke:black;stroke-width:<?php echo $strokeWidth?>;fill-opacity:.7;stroke-opacity:1" />
</svg>
This is probably because the browser, as it parses the file, ignores any "broken" elements, that is, elements that it doesn't understand. So, something like...
<rect x="<?php echo $strokeWidth/2?>" y="<?php echo $strokeWidth/2?>" width="<?php echo $length?>" height="<?php echo $length?>" style="fill:red;stroke:black;stroke-width:<?php echo $strokeWidth?>;fill-opacity:.7;stroke-opacity:1" />
...just gets ignored. Instead of the PHP server echoing a value to be placed in the 'height=" " ', the browser parses ' height="<?php echo $length?>" ' -- that is, it thinks the value of 'height' is "<?php echo $length?>", which doesn't make any sense. So, the whole <rect> element gets ignored. (Its parent <svg> element is unaffected, since it has no PHP in it.)
Experimenting with the <use> tag
<!DOCTYPE html><meta charset="utf-8">
<svg width="500" height="500">
<rect id="useIt" width="200" height="150" />
<use x=100 y=300 fill="red" width="300" xlink:href="#useIt" />
</svg>
Notes:
HTML5 --> No <html> tag needed, just doctype declaration and <meta charset=...> tag (for security)
Within the <use> tag...
- it doesn't matter if an attribute is to the left or right of the xlink:href attribute
- cannot override attribute values set by the original svg element with ID "useIt"
- so, including 'width="400" ' doesn't do anything, since width was already declared as 200 in "useIt"
SVG Coordinate System: Text vs. Images
The "x" and "y" attributes set the location of the SVG element. But it's a bit different between text and images. For an image, the upper left corner of the image is placed at x,y. For text, the lower left corner of the text is placed at x,y. Bit unintuitive.
No comments:
Post a Comment