You are viewing a plain text version of this content. The canonical link for it is here.
Posted to batik-users@xmlgraphics.apache.org by Bernardo Buffa Colomé <kr...@yahoo.es> on 2003/09/03 09:53:35 UTC
Q: To modify an CSS property from JavaScript
Hi. Given a doc like this:
<?xml version="1.0" standalone="no"?>
<svg:svg
width="200mm" height="200mm"
viewBox="0 0 1000 500" preserveAspectRatio="xMinYMin
meet"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<style type="text/css"><![CDATA[
.teufel
{
fill:red;
stroke:blue;
stroke-width:.1;
visibility:visible;
}
]]></style>
<script type="text/ecmascript"><![CDATA[
]]></script>
<svg:rect
x="100" y="100"
width="300" height="100"
id="teufel01"
class="teufel"
/>
<svg:rect
x="300" y="-100"
width="300" height="100"
id="teufel02"
class="teufel"
/>
</svg:svg>
my question is: It is possible to modify from
ECMAScript, the property 'visibility' of an arbitrary
CSS class (eg 'teufel') and to expect the document
update the elements properly. If yes, somebody can
tell me how?
Thanks in advance. And congratulations for the great
human effort behind Batik!
Bernardo
___________________________________________________
Yahoo! Messenger - Nueva versión GRATIS
Super Webcam, voz, caritas animadas, y más...
http://messenger.yahoo.es
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org
Re: Q: To modify an CSS property from JavaScript
Posted by Thomas DeWeese <Th...@Kodak.com>.
Bernardo Buffa Colomé wrote:
> Your suggestion works fine, I was trying to avoid the
> iteration of every element in a possible large
> document. And in some context maybe the requirements
> I'm working on forbides me to change the element's
> class.
>
> I'm thinking on not to use CSS classes, but to group
> all the related elements in a <svg:g></svg:g> and
> manipulate the visibility of the group. I promise to
> tell you my R+D results! :-)
Hi Bernardo,
If you can group and set visibility on the group this will be
_by_far_ the fastest solution. However you should also be able to
use the CSSDOM to adjust CSS rules - I am not an expert in CSS and
this area of Batik is probably not well tested but if you can't use
grouping this might be an option:
http://www.w3.org/TR/DOM-Level-2-Style/css.html
Good luck!
>
> Thanks!
> Bernardo
>
>
>
> --- Thomas Estier <th...@epfl.ch> escribió: >
> > [...]
>
>> > my question is: It is possible to modify from
>> > ECMAScript, the property 'visibility' of an
>>arbitrary
>> > CSS class (eg 'teufel') and to expect the
>>document
>> > update the elements properly. If yes, somebody
>>can
>> > tell me how?
>> > [...]
>>
>>Hi,
>>
>>I would do something like creating two CSS classes
>>and modifying the
>>class attribute of the elements or group of
>>elements.
>>
>>See code bellow.
>>
>>Hope that helps.
>>
>> Thomas
>>
>>PS Your question should perhaps have been sent to
>> <http://groups.yahoo.com/group/svg-developers/>
>>
>>
> ----------------------------------------------------------------------------------
>
>><?xml version="1.0" standalone="no"?>
>><svg:svg
>> width="200mm" height="200mm"
>> viewBox="0 -200 1000 500"
>>preserveAspectRatio="xMinYMin meet"
>> xmlns:svg="http://www.w3.org/2000/svg"
>> xmlns:xlink="http://www.w3.org/1999/xlink">
>>
>> <style type="text/css"><![CDATA[
>> .teufelVisible
>> {
>> fill:red;
>> stroke:blue;
>> stroke-width:.1;
>> visibility:visible;
>> }
>> .teufelNotVisible
>> {
>> visibility:hidden;
>> }
>> ]]></style>
>>
>> <script type="text/ecmascript"><![CDATA[
>>
>>
>>
>
> document.getElementById("teufel02").setAttribute('class','teufelNotVisible');
>
>>
>> ]]></script>
>>
>>
>>
>> <svg:rect
>> x="100" y="100"
>> width="300" height="100"
>> id="teufel01"
>> class="teufelVisible"
>> />
>> <svg:rect
>> x="300" y="-100"
>> width="300" height="100"
>> id="teufel02"
>> class="teufelVisible"
>> />
>>
>> </svg:svg>
>>
> ----------------------------------------------------------------------------------
>
>>Bernardo Buffa Colomé wrote:
>>
>>>Hi. Given a doc like this:
>>>
>>><?xml version="1.0" standalone="no"?>
>>><svg:svg
>>> width="200mm" height="200mm"
>>> viewBox="0 0 1000 500"
>>
>>preserveAspectRatio="xMinYMin
>>
>>>meet"
>>> xmlns:svg="http://www.w3.org/2000/svg"
>>>xmlns:xlink="http://www.w3.org/1999/xlink"
>>>
>>> <style type="text/css"><![CDATA[
>>> .teufel
>>> {
>>> fill:red;
>>> stroke:blue;
>>> stroke-width:.1;
>>> visibility:visible;
>>> }
>>> ]]></style>
>>>
>>> <script type="text/ecmascript"><![CDATA[
>>> ]]></script>
>>>
>>>
>>>
>>> <svg:rect
>>> x="100" y="100"
>>> width="300" height="100"
>>> id="teufel01"
>>> class="teufel"
>>> />
>>> <svg:rect
>>> x="300" y="-100"
>>> width="300" height="100"
>>> id="teufel02"
>>> class="teufel"
>>> />
>>>
>>></svg:svg>
>>>
>>>
>>>
>>>
>>>my question is: It is possible to modify from
>>>ECMAScript, the property 'visibility' of an
>>
>>arbitrary
>>
>>>CSS class (eg 'teufel') and to expect the document
>>>update the elements properly. If yes, somebody can
>>>tell me how?
>>>
>>>Thanks in advance. And congratulations for the
>>
>>great
>>
>>>human effort behind Batik!
>>>
>>>Bernardo
>>>
>>>
>>>
>>>
>>>
>>
>>___________________________________________________
>>
>>>Yahoo! Messenger - Nueva versión GRATIS
>>>Super Webcam, voz, caritas animadas, y más...
>>>http://messenger.yahoo.es
>>>
>>>
>>
> ---------------------------------------------------------------------
>
>>>To unsubscribe, e-mail:
>>
>>batik-users-unsubscribe@xml.apache.org
>>
>>>For additional commands, e-mail:
>>
>>batik-users-help@xml.apache.org
>>
>>
>>
>
> ---------------------------------------------------------------------
>
>>To unsubscribe, e-mail:
>>batik-users-unsubscribe@xml.apache.org
>>For additional commands, e-mail:
>>batik-users-help@xml.apache.org
>>
>
>
> ___________________________________________________
> Yahoo! Messenger - Nueva versión GRATIS
> Super Webcam, voz, caritas animadas, y más...
> http://messenger.yahoo.es
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
> For additional commands, e-mail: batik-users-help@xml.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org
Re: Q: To modify an CSS property from JavaScript
Posted by Bernardo Buffa Colomé <kr...@yahoo.es>.
Your suggestion works fine, I was trying to avoid the
iteration of every element in a possible large
document. And in some context maybe the requirements
I'm working on forbides me to change the element's
class.
I'm thinking on not to use CSS classes, but to group
all the related elements in a <svg:g></svg:g> and
manipulate the visibility of the group. I promise to
tell you my R+D results! :-)
Thanks!
Bernardo
--- Thomas Estier <th...@epfl.ch> escribió: >
> [...]
> > my question is: It is possible to modify from
> > ECMAScript, the property 'visibility' of an
> arbitrary
> > CSS class (eg 'teufel') and to expect the
> document
> > update the elements properly. If yes, somebody
> can
> > tell me how?
> > [...]
>
> Hi,
>
> I would do something like creating two CSS classes
> and modifying the
> class attribute of the elements or group of
> elements.
>
> See code bellow.
>
> Hope that helps.
>
> Thomas
>
> PS Your question should perhaps have been sent to
> <http://groups.yahoo.com/group/svg-developers/>
>
>
----------------------------------------------------------------------------------
> <?xml version="1.0" standalone="no"?>
> <svg:svg
> width="200mm" height="200mm"
> viewBox="0 -200 1000 500"
> preserveAspectRatio="xMinYMin meet"
> xmlns:svg="http://www.w3.org/2000/svg"
> xmlns:xlink="http://www.w3.org/1999/xlink">
>
> <style type="text/css"><![CDATA[
> .teufelVisible
> {
> fill:red;
> stroke:blue;
> stroke-width:.1;
> visibility:visible;
> }
> .teufelNotVisible
> {
> visibility:hidden;
> }
> ]]></style>
>
> <script type="text/ecmascript"><![CDATA[
>
>
>
document.getElementById("teufel02").setAttribute('class','teufelNotVisible');
>
> ]]></script>
>
>
>
> <svg:rect
> x="100" y="100"
> width="300" height="100"
> id="teufel01"
> class="teufelVisible"
> />
> <svg:rect
> x="300" y="-100"
> width="300" height="100"
> id="teufel02"
> class="teufelVisible"
> />
>
> </svg:svg>
>
----------------------------------------------------------------------------------
>
> Bernardo Buffa Colomé wrote:
> > Hi. Given a doc like this:
> >
> > <?xml version="1.0" standalone="no"?>
> > <svg:svg
> > width="200mm" height="200mm"
> > viewBox="0 0 1000 500"
> preserveAspectRatio="xMinYMin
> > meet"
> > xmlns:svg="http://www.w3.org/2000/svg"
> > xmlns:xlink="http://www.w3.org/1999/xlink"
> >
> > <style type="text/css"><![CDATA[
> > .teufel
> > {
> > fill:red;
> > stroke:blue;
> > stroke-width:.1;
> > visibility:visible;
> > }
> > ]]></style>
> >
> > <script type="text/ecmascript"><![CDATA[
> > ]]></script>
> >
> >
> >
> > <svg:rect
> > x="100" y="100"
> > width="300" height="100"
> > id="teufel01"
> > class="teufel"
> > />
> > <svg:rect
> > x="300" y="-100"
> > width="300" height="100"
> > id="teufel02"
> > class="teufel"
> > />
> >
> > </svg:svg>
> >
> >
> >
> >
> > my question is: It is possible to modify from
> > ECMAScript, the property 'visibility' of an
> arbitrary
> > CSS class (eg 'teufel') and to expect the document
> > update the elements properly. If yes, somebody can
> > tell me how?
> >
> > Thanks in advance. And congratulations for the
> great
> > human effort behind Batik!
> >
> > Bernardo
> >
> >
> >
> >
> >
> ___________________________________________________
> > Yahoo! Messenger - Nueva versión GRATIS
> > Super Webcam, voz, caritas animadas, y más...
> > http://messenger.yahoo.es
> >
> >
>
---------------------------------------------------------------------
> > To unsubscribe, e-mail:
> batik-users-unsubscribe@xml.apache.org
> > For additional commands, e-mail:
> batik-users-help@xml.apache.org
>
>
>
---------------------------------------------------------------------
> To unsubscribe, e-mail:
> batik-users-unsubscribe@xml.apache.org
> For additional commands, e-mail:
> batik-users-help@xml.apache.org
>
___________________________________________________
Yahoo! Messenger - Nueva versión GRATIS
Super Webcam, voz, caritas animadas, y más...
http://messenger.yahoo.es
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org
Re: Q: To modify an CSS property from JavaScript
Posted by Thomas Estier <th...@epfl.ch>.
> [...]
> my question is: It is possible to modify from
> ECMAScript, the property 'visibility' of an arbitrary
> CSS class (eg 'teufel') and to expect the document
> update the elements properly. If yes, somebody can
> tell me how?
> [...]
Hi,
I would do something like creating two CSS classes and modifying the
class attribute of the elements or group of elements.
See code bellow.
Hope that helps.
Thomas
PS Your question should perhaps have been sent to
<http://groups.yahoo.com/group/svg-developers/>
----------------------------------------------------------------------------------
<?xml version="1.0" standalone="no"?>
<svg:svg
width="200mm" height="200mm"
viewBox="0 -200 1000 500" preserveAspectRatio="xMinYMin meet"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css"><![CDATA[
.teufelVisible
{
fill:red;
stroke:blue;
stroke-width:.1;
visibility:visible;
}
.teufelNotVisible
{
visibility:hidden;
}
]]></style>
<script type="text/ecmascript"><![CDATA[
document.getElementById("teufel02").setAttribute('class','teufelNotVisible');
]]></script>
<svg:rect
x="100" y="100"
width="300" height="100"
id="teufel01"
class="teufelVisible"
/>
<svg:rect
x="300" y="-100"
width="300" height="100"
id="teufel02"
class="teufelVisible"
/>
</svg:svg>
----------------------------------------------------------------------------------
Bernardo Buffa Colomé wrote:
> Hi. Given a doc like this:
>
> <?xml version="1.0" standalone="no"?>
> <svg:svg
> width="200mm" height="200mm"
> viewBox="0 0 1000 500" preserveAspectRatio="xMinYMin
> meet"
> xmlns:svg="http://www.w3.org/2000/svg"
> xmlns:xlink="http://www.w3.org/1999/xlink"
>
> <style type="text/css"><![CDATA[
> .teufel
> {
> fill:red;
> stroke:blue;
> stroke-width:.1;
> visibility:visible;
> }
> ]]></style>
>
> <script type="text/ecmascript"><![CDATA[
> ]]></script>
>
>
>
> <svg:rect
> x="100" y="100"
> width="300" height="100"
> id="teufel01"
> class="teufel"
> />
> <svg:rect
> x="300" y="-100"
> width="300" height="100"
> id="teufel02"
> class="teufel"
> />
>
> </svg:svg>
>
>
>
>
> my question is: It is possible to modify from
> ECMAScript, the property 'visibility' of an arbitrary
> CSS class (eg 'teufel') and to expect the document
> update the elements properly. If yes, somebody can
> tell me how?
>
> Thanks in advance. And congratulations for the great
> human effort behind Batik!
>
> Bernardo
>
>
>
>
> ___________________________________________________
> Yahoo! Messenger - Nueva versión GRATIS
> Super Webcam, voz, caritas animadas, y más...
> http://messenger.yahoo.es
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
> For additional commands, e-mail: batik-users-help@xml.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org