HTML and CSS Reference
In-Depth Information
Note that in real life, it's possible for websites to block
embedding like this by sending information to the browser to
turn on extra security features. This is done to protect users
from more nefarious versions of Mike's trick on Stef.
Transforms, gradients, patterns, and declarative animation
SVG
is a huge topic, worthy of a book by itself, and we've barely
scratched the surface so far. In this section, we'll finish by taking a
quick look at some of the more advanced features.
When you want to apply an effect to a collection of elements, you use
the grouping element,
<g>
. Grouping is also useful for other purposes,
for example, if you want to move several elements at the same time.
You saw a transform in action in the last example of the previous sec-
tion. Here it is again:
<g transform="rotate(180) translate(-800,-600)">
The
transform
attribute accepts a space-separated list of commands that
are applied in order. The element is rotated 180 degrees and then,
because the rotation point by default is the upper-left corner, it's
moved back into view with the
translate
transform. You could instead
pass a set of coordinates to the
rotate
transform and achieve the same
result in a single step:
<g transform="rotate(180,400,300)">
