internal CSS

[Andrew Neiderer]

This is a simple fix, I hope, but I am unsure how to this.

I am using an internal stylesheet, and doing animation of color. The
first 3 rectangles display properly using hexcodes in the code below.
But I want to use internal stylesheet attribute name/values
for the 4'th animateColor below, which is incorrect.

Can someone fix and tell me what to do for the "from", "to" attributes
in the 4'th <rect> element in the code below.

Thank you.

- Andrew M. Neiderer
US Army Research Laboratory

-------------------------------------------------------------------------
<?xml version='1.0' encoding='UTF-8'?>
<svg xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
preserveAspectRatio='none'>

<title>
<!-- -->
</title>

<desc>
<!-- -->
<!-- by Andrew M. Neiderer, 17 Feb 2006. -->
</desc>

<defs>

<!-- style sheet -->

<style type='text/css'>
<![CDATA[
.strongBlue {fill:#151B8D}
.mediumBlue {fill:#2B60DE}
.weakBlue {fill:#3BB9FF}
.strongRed {fill:#FFFFFF}
.strongRedFrom {from:#FFFFFF}
.mediumRed {fill:#F62817}
.weakRed {fill:#F75D59;to:#F75D59}
.green {fill:#00FF00}
]]>
</style>

<!-- scripting definitions -->

<script type='text/ecmascript'>
<![CDATA[
<!-- member data -->

var rect = document.getElementById('r0c0');

<!-- member functions -->

function changeColor(rect)
{
if ( rect != null ) {
rect.setAttribute('class','strongRed');

var animate =
rect.getElementsByTagNameNS('http://www.w3.org/2000/svg','animate').item(0);

if ( animate != null ) {
animate.setAttribute('to','0.20');
}
else
alert("animate == null");
}
else
alert("rect == null");
}
]]>
</script>
</defs>

<rect id='r0c0' x='0.0' y='0.0' width='92.1875' height='49.609375'>
<animateColor attributeName="fill" from="#FF0000" to="#FFFFFF" dur="5s" fill="freeze"/>
</rect>
<rect id='r1c0' x='0.0' y='50.0' width='92.1875' height='49.609375'>
<animateColor attributeName="fill" from="#FFFFFF" to="#00FF00" dur="10s" fill="freeze"/>
</rect>
<rect id='r2c0' x='0.0' y='100.0' width='92.1875' height='49.609375'>
<animateColor attributeName="fill" from="#0000FF" to="#FFFFFF" dur="15s" fill="freeze"/>
</rect>
<rect id='r3c0' x='0.0' y='150.0' width='92.1875' height='49.609375'>
<animateColor attributeName="fill" class="strongRedFrom"
from="strongRedFrom" to="#F75D59"
dur="20s" fill="freeze"/>
</rect>

</svg>

 

[Martin Honnen]

Andrew Neiderer wrote:

Can someone fix and tell me what to do for the "from", "to" attributes
in the 4'th <rect> element in the code below.

If you want to animate the fill attribute then you need a valid fill
value. I think you can animate the class attribute as well e.g.

<animate attributeName="class" from="strongRedFrom"
to="strongRed"
dur="20s" fill="freeze"/>

.strongRedFrom {from:#FFFFFF}

but obviously you need to check then if you have other rules for that
class definining other CSS properties (as the animation). And that
animation above would mean class being strongRedFrom for 20s and then
change to strongRed.

I don't know of a way to have an animateColor refer to some color values
defined in CSS stylesheets, you might want to ask on the SVG developers
list whether someone knows more.