Change a color in a "<use>" ?

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Change a color in a "<use>" ?

Martin-65

I want to define a group and then use it in several different places.
Then, in the different instances, I want a certain part of the group
to be displayed in a different color.

In the example below, I'm displaying "curve1" twice. I want the second
path in the group to be displayed in a different color in one of the
instances. I've tried using: style="stroke:#90EE90;" as shownhere but
it doesn't do anything.

Is there some way to make this to work?




<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="1000" height="1000" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<defs>
<g id="curve1">
<path d="M 100,100 A50,50 0 0,1 150,150"
style="fill:none; stroke:black; stroke-width:25"/>

<path d="M 100,100 A50,50 0 0,1 150,150"
style="fill:none; stroke:#D3D3D3; stroke-width:21"/>
</g>
</defs>

<use xlink:href="#curve1" x="20" y="40" style="stroke:#90EE90;"/>

<use xlink:href="#curve1" x="200" y="40"/>

</svg>
_______________________________________________
Mozilla-svg mailing list
[hidden email]
http://mail.mozilla.org/listinfo/mozilla-svg
Reply | Threaded
Open this post in threaded view
|

Re: Change a color in a "<use>" ?

Andreas Neumann
Hi Martin,

the following works:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

 <svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
  <g id="curve1">
  <path d="M 100,100 A50,50 0 0,1 150,150" />
  <path d="M 100,100 A50,50 0 0,1 150,150" />
  </g>
  </defs>

  <use xlink:href="#curve1" x="20" y="40" stroke="#90EE90" fill="none"
/>
  <use xlink:href="#curve1" x="200" y="40" stroke="red" fill="none" />
  <use xlink:href="#curve1" x="400" y="40" stroke="blue" fill="none" />


 </svg>

--------------

note that I removed the style attributes from the group in the <defs>
section. I also recommend to define the xlink namespace in the header
if you use <use /> elements. Finally, it is also better to use either
presentation attributes (fill="" stroke="") instead of the style
attribute (style=""). Or you could use CSS classes directly. Most of
the SVG mobile viewers don't support CSS. So if you would like to
target them as well, I would recommend using presentation attributes.

Andreas

_______________________________________________
Mozilla-svg mailing list
[hidden email]
http://mail.mozilla.org/listinfo/mozilla-svg
Reply | Threaded
Open this post in threaded view
|

Re: Change a color in a "<use>" ?

Gus Richter
In reply to this post by Martin-65
Martin wrote:

> I want to define a group and then use it in several different places.
> Then, in the different instances, I want a certain part of the group
> to be displayed in a different color.
>
> In the example below, I'm displaying "curve1" twice. I want the second
> path in the group to be displayed in a different color in one of the
> instances. I've tried using: style="stroke:#90EE90;" as shownhere but
> it doesn't do anything.
>
> Is there some way to make this to work?

Have a look at this one that I've tried out.
--
Gus


<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">

   <defs>
     <style type="text/css"><![CDATA[
       .curve11 {
           fill:none; stroke:black; stroke-width:25
       }
       .curve12 {
           fill:none; stroke:#D3D3D3; stroke-width:21
       }
       .curve13 {
           fill:none; stroke:green; stroke-width:25
       }
/*****************************************
-The xlink namespace must be bound.
  (For your original, Fx needs it and Opera does not work with it.)
-The first instance of <use/> positions itself as per the coordinates of
100,100.
-The second and third instances of <use/>, use the new x/y coordinates are
  referenced from the original 100,100 coordinates.
-In trying to provide a green version in the second example using styles, no
  matter what I tried, I could not alter the stroke color after the
fact, as if
  once drawn, it could not be changed - but then it may be due to my
failings.
-Anyway, what I finally did here is to define another version with
curve2, which
  works with Fx but not with Opera.
*****************************************/
     ]]></style>
   </defs>

   <defs>
     <symbol id="curve1">
       <path class="curve11" d="M 100,100 A50,50 0 0,1 150,150"/>
       <path class="curve12" d="M 100,100 A50,50 0 0,1 150,150"/>
     </symbol>
     <symbol id="curve2">
       <path class="curve13" d="M 100,100 A50,50 0 0,1 150,150"/>
       <path class="curve12" d="M 100,100 A50,50 0 0,1 150,150"/>
     </symbol>
   </defs>

   <use xlink:href="#curve1"/>
   <use x="100" y="40" xlink:href="#curve2"/>
   <use x="200" y="40" xlink:href="#curve1"/>

</svg>
_______________________________________________
Mozilla-svg mailing list
[hidden email]
http://mail.mozilla.org/listinfo/mozilla-svg
Reply | Threaded
Open this post in threaded view
|

Re: Change a color in a "<use>" ?

Martin-65
In reply to this post by Martin-65
See below...

On Mon, 19 Dec 2005 15:53:03 -0700, Martin <[hidden email]>
wrote:

>
>I want to define a group and then use it in several different places.
>Then, in the different instances, I want a certain part of the group
>to be displayed in a different color.
>
>In the example below, I'm displaying "curve1" twice. I want the second
>path in the group to be displayed in a different color in one of the
>instances. I've tried using: style="stroke:#90EE90;" as shownhere but
>it doesn't do anything.
>
>Is there some way to make this to work?
>
>
>
>
><?xml version="1.0" standalone="no"?>
><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
>"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
>
><svg width="1000" height="1000" version="1.1"
>xmlns="http://www.w3.org/2000/svg">
>
><defs>
><g id="curve1">
><path d="M 100,100 A50,50 0 0,1 150,150"
>style="fill:none; stroke:black; stroke-width:25"/>
>
><path d="M 100,100 A50,50 0 0,1 150,150"
>style="fill:none; stroke:#D3D3D3; stroke-width:21"/>
></g>
></defs>
>
><use xlink:href="#curve1" x="20" y="40" style="stroke:#90EE90;"/>
>
><use xlink:href="#curve1" x="200" y="40"/>
>
></svg>

Here's what I ended up doing. What it boils down to is: In the <g>
specificaton, on the path where I want to change the color, use
"presentation attributes" rather than a "style" and omit the attribute
for "stroke" entirely. Then add the "stroke" attribute in the <use
tag. Thus:

<defs>

<g id="curve1">
   <path d="M 0,0 A50,50 0 0,1 50,50" style="fill:none; stroke:black;
stroke-width:25"/>
   <path d="M 0,0 A50,50 0 0,1 50,50" fill="none" stroke-width="21"/>
</g>

<g id="curve2">
   <path d="M 0,50 A50,50 0 0,1 50,0" style="fill:none; stroke:black;
stroke-width:25"/>
   <path d="M 0,50 A50,50 0 0,1 50,0" fill="none" stroke-width="21"/>
</g>

<g id="curve3">
   <path d="M 0,0 A50,50 0 0,1 25,25" style="fill:none; stroke:black;
stroke-width:25"/>
   <path d="M 0,0 A50,50 0 0,1 25,25" fill="none" stroke-width="21"/>
</g>

<g id="line1">
   <line x1="0" y1="0" x2="100" y2="0" style="fill:none; stroke:black;
stroke-width:25"/>
   <line x1="0" y1="0" x2="100" y2="0" style="fill:none;
stroke-width:21"/>
</g>

</defs>


<use xlink:href="#curve1" id="MSD103" x="20" y="40" stroke="#90EE90"
/>
<use xlink:href="#curve1" id="MSD104" x="402" y="40" stroke="#d3d3d3"
/>
<use xlink:href="#curve2" id="MSD101" x="248" y="40" stroke="#d3d3d3"
/>
<use xlink:href="#curve3" id="MSD100" x="20" y="90" stroke="#d3d3d3"
/>
<use xlink:href="#line1" x="300" y="40" stroke="#90EE90"/>

In my actual application, I have some scripting that is changing the
stroke color. The whole thing seems to work ok in both IE and in
Firefox.

Thanks for your responses to my question.

Martin

_______________________________________________
Mozilla-svg mailing list
[hidden email]
http://mail.mozilla.org/listinfo/mozilla-svg
Reply | Threaded
Open this post in threaded view
|

Re: Change a color in a "<use>" ?

Rob  Russell
You could also have a look at currentColor in
http://www.w3.org/TR/SVG11/color.html#ColorProperty . I've got this to
work using an attribute color="rgb(90,90,90)" on a use element. I
believe this is a styling attribute, though, so Andreas point about
mobile browsers should be considered.

On 12/20/05, Martin <[hidden email]> wrote:

> See below...
>
> On Mon, 19 Dec 2005 15:53:03 -0700, Martin <[hidden email]>
> wrote:
>
> >
> >I want to define a group and then use it in several different places.
> >Then, in the different instances, I want a certain part of the group
> >to be displayed in a different color.
> >
> >In the example below, I'm displaying "curve1" twice. I want the second
> >path in the group to be displayed in a different color in one of the
> >instances. I've tried using: style="stroke:#90EE90;" as shownhere but
> >it doesn't do anything.
> >
> >Is there some way to make this to work?
> >
> >
> >
> >
> ><?xml version="1.0" standalone="no"?>
> ><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
> >"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
> >
> ><svg width="1000" height="1000" version="1.1"
> >xmlns="http://www.w3.org/2000/svg">
> >
> ><defs>
> ><g id="curve1">
> ><path d="M 100,100 A50,50 0 0,1 150,150"
> >style="fill:none; stroke:black; stroke-width:25"/>
> >
> ><path d="M 100,100 A50,50 0 0,1 150,150"
> >style="fill:none; stroke:#D3D3D3; stroke-width:21"/>
> ></g>
> ></defs>
> >
> ><use xlink:href="#curve1" x="20" y="40" style="stroke:#90EE90;"/>
> >
> ><use xlink:href="#curve1" x="200" y="40"/>
> >
> ></svg>
>
> Here's what I ended up doing. What it boils down to is: In the <g>
> specificaton, on the path where I want to change the color, use
> "presentation attributes" rather than a "style" and omit the attribute
> for "stroke" entirely. Then add the "stroke" attribute in the <use
> tag. Thus:
>
> <defs>
>
> <g id="curve1">
>   <path d="M 0,0 A50,50 0 0,1 50,50" style="fill:none; stroke:black;
> stroke-width:25"/>
>   <path d="M 0,0 A50,50 0 0,1 50,50" fill="none" stroke-width="21"/>
> </g>
>
> <g id="curve2">
>   <path d="M 0,50 A50,50 0 0,1 50,0" style="fill:none; stroke:black;
> stroke-width:25"/>
>   <path d="M 0,50 A50,50 0 0,1 50,0" fill="none" stroke-width="21"/>
> </g>
>
> <g id="curve3">
>   <path d="M 0,0 A50,50 0 0,1 25,25" style="fill:none; stroke:black;
> stroke-width:25"/>
>   <path d="M 0,0 A50,50 0 0,1 25,25" fill="none" stroke-width="21"/>
> </g>
>
> <g id="line1">
>   <line x1="0" y1="0" x2="100" y2="0" style="fill:none; stroke:black;
> stroke-width:25"/>
>   <line x1="0" y1="0" x2="100" y2="0" style="fill:none;
> stroke-width:21"/>
> </g>
>
> </defs>
>
>
> <use xlink:href="#curve1" id="MSD103" x="20" y="40" stroke="#90EE90"
> />
> <use xlink:href="#curve1" id="MSD104" x="402" y="40" stroke="#d3d3d3"
> />
> <use xlink:href="#curve2" id="MSD101" x="248" y="40" stroke="#d3d3d3"
> />
> <use xlink:href="#curve3" id="MSD100" x="20" y="90" stroke="#d3d3d3"
> />
> <use xlink:href="#line1" x="300" y="40" stroke="#90EE90"/>
>
> In my actual application, I have some scripting that is changing the
> stroke color. The whole thing seems to work ok in both IE and in
> Firefox.
>
> Thanks for your responses to my question.
>
> Martin
>
> _______________________________________________
> Mozilla-svg mailing list
> [hidden email]
> http://mail.mozilla.org/listinfo/mozilla-svg
>

_______________________________________________
Mozilla-svg mailing list
[hidden email]
http://mail.mozilla.org/listinfo/mozilla-svg