The opacity of the jpeg is set to .7 by the SVG. The opaque graphic is overlaid over a background which is set to animate through various RGB colour values.
<g stroke = "white" fill = "white">
<rect x = "0" y = "0" width = "100%" height = "100%"/>
<animateColor attributeName="fill"
attributeType="CSS" values="rgb(255,245,238);rgb(255,181,197);rgb(139,0,139);rgb(255,181,197);rgb(255,245,238)"
dur="10s" repeatCount="indefinite"/>
<image x="0" y="0" width="240px" height="420px" xlink:href="../graphics/bosh3.jpg" style="opacity:.7">
<title>Bosh SVG enhanced graphic</title>
</image>
<text id="boshText" x="130" y="230" style="text-anchor:middle; font-size:70; font-weight:800; letter-spacing:5px; filter:url(#dropshadow)">
<tspan style="fill:rgb(255,255,255);fill-opacity:0.1;stroke:rgb(0,0,0);stroke-width:3.5px">BOSH!</tspan>
</text>
</g>
Unless a specific element is referenced by the <animateColor> element it will automatically work on the referenced attribute (in this case fill) of its parent element, the previous element in the document tree.
The drop-shadow text is called via an SVG filter, thus:
<filter id="dropshadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="6" dy="6" result="offsetBlurredAlpha"/> <feMerge>
<feMergeNode in="offsetBlurredAlpha"/> <feMergeNode in="SourceGraphic"/> </feMerge>
</filter>
Don't worry about this for now, it will be explained later.
