Patterns + currentColor

[mitchwolberg]

I'm new to SVG and this list and I'm trying to prototype an SVG Export for our geology software. We use a large library of vector based patterns that would be perfect for SVG however I can't seem to be able to set the currentColor so that the pattern stroke color will change. Here's an example of the output from my program.

<svg width="500" height="400" viewBox="0.00 0.00 500.00 400.00" enable-background="new 0.00 0.00 500.00 400.00" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="Horizontal" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10" stroke="currentColor">
<path d="M 0 1 L 10 1 M 0 6 L 10 6"/>
</pattern>
</defs>
<g transform="scale(1,1)">
<g style="fill:url(#Horizontal); stroke:#008000;">
<rect x="10" y="10" width="70" height="70" stroke="#FF0000" stroke-width="1" stroke-dasharray="8,8,1,8,1,8"/>
</g>
</g>
</svg>

I'd also like to use a solid fill behind the pattern but it appears that I need to draw the rect twice to achieve this.

Thanks,
Mitch Wolberg,
RockWare, Inc.




-----
To unsubscribe send a message to: svg-developers-***@yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----
Yahoo! Groups Links

<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
Individual Email | Traditional

<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)

<*> To change settings via email:
mailto:svg-developers-***@yahoogroups.com
mailto:svg-developers-***@yahoogroups.com

<*> To unsubscribe from this group, send an email to:
svg-developers-***@yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/

[David Dailey]

In what you have written, all seems okay except for the
stroke="currentColor" statement. That value would need to be changed,
I believe, either through declarative animattion (SMIL) or through script.

I changed your code around a wee bit and made it so that either SMIL
or JavaScript can be used to change the stroke color. Am not
completely sure I understand what you mean, but hopefully this
addresses your question.


regards
David Dailey
-----------------------

<svg width="500" height="400" viewBox="0.00 0.00 200
150" version="1.1" xmlns="http://www.w3.org/2000/svg">
<script>
function f(){
document.getElementById("Horizontal").setAttributeNS(null,
"stroke", "blue")
}
</script>
<defs>
<pattern id="Horizontal" patternUnits="userSpaceOnUse" x="0" y="0"
width="10" height="10" stroke="currentColor">
<animateColor repeatCount="indefinite" attributeName="stroke"
values="red;blue;yellow;red" dur="4s" begin="R.click"/>
<path d="M 0 1 L 10 1 M 0 6 L 10 6"/>
</pattern>
</defs>
<g transform="scale(1,1)">
<g style="fill:url(#Horizontal); stroke:#008000;">
<rect id="R" x="10" y="10" width="70" height="70" stroke="#FF0000"
stroke-width="1" stroke-dasharray="8,8,1,8,1,8"/>
</g>
<text x="10" y="90" font-size="10pt" fill="black">Click rectangle</text>
<text x="10" y="105" font-size="10pt" fill="red" onclick="f()">or
click here</text>
</g>
</svg>



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

Post by mitchwolberg
I'm new to SVG and this list and I'm trying to prototype an SVG
Export for our geology software. We use a large library of vector
based patterns that would be perfect for SVG however I can't seem to
be able to set the currentColor so that the pattern stroke color
will change. Here's an example of the output from my program.
<svg width="500" height="400" viewBox="0.00 0.00 500.00 400.00"
enable-background="new 0.00 0.00 500.00 400.00" version="1.1"
xmlns="<http://www.w3.org/2000/svg>http://www.w3.org/2000/svg">
<defs>
<pattern id="Horizontal" patternUnits="userSpaceOnUse" x="0" y="0"
width="10" height="10" stroke="currentColor">
<path d="M 0 1 L 10 1 M 0 6 L 10 6"/>
</pattern>
</defs>
<g transform="scale(1,1)">
<g style="fill:url(#Horizontal); stroke:#008000;">
<rect x="10" y="10" width="70" height="70" stroke="#FF0000"
stroke-width="1" stroke-dasharray="8,8,1,8,1,8"/>
</g>
</g>
</svg>
I'd also like to use a solid fill behind the pattern but it appears
that I need to draw the rect twice to achieve this.
Thanks,
Mitch Wolberg,
RockWare, Inc.

-----
To unsubscribe send a message to: svg-developers-***@yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----
Yahoo! Groups Links

<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
Individual Email | Traditional

<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)

<*> To change settings via email:
mailto:svg-developers-***@yahoogroups.com
mailto:svg-developers-***@yahoogroups.com

<*> To unsubscribe from this group, send an email to:
svg-developers-***@yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/

[mitchwolberg]

Post by David Dailey
In what you have written, all seems okay except for the
stroke="currentColor" statement. That value would need to be changed,
I believe, either through declarative animattion (SMIL) or through script.
I changed your code around a wee bit and made it so that either SMIL
or JavaScript can be used to change the stroke color. Am not
completely sure I understand what you mean, but hopefully this
addresses your question.

Thanks I'll take a look at your code and see if it will work.

I wasn't thinking in terms of scripting since our drawings are static. The idea is that using the same pattern description I want to be able to fill a rectangle with pattern lines in blue and the background in yellow and then another rectangle using the same description with pattern lines in red and the background in blue. It looked to me that the "currentColor" value allowed you to replace the color in the code.

Mitch



-----
To unsubscribe send a message to: svg-developers-***@yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----
Yahoo! Groups Links

<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
Individual Email | Traditional

<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)

<*> To change settings via email:
mailto:svg-developers-***@yahoogroups.com
mailto:svg-developers-***@yahoogroups.com

<*> To unsubscribe from this group, send an email to:
svg-developers-***@yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/

[mitchwolberg]

I did see this discussion but didn't see where to change the currentColor.

http://tech.groups.yahoo.com/group/svg-developers/message/58035

Mitch



-----
To unsubscribe send a message to: svg-developers-***@yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----
Yahoo! Groups Links

<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
Individual Email | Traditional

<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)

<*> To change settings via email:
mailto:svg-developers-***@yahoogroups.com
mailto:svg-developers-***@yahoogroups.com

<*> To unsubscribe from this group, send an email to:
svg-developers-***@yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/

[ddailey]

Oh, yes, I had forgotten about the currentColor attribute in CSS3 (I remember reading about it once upon a time). I gather CSS3 borrowed it from SVG 1.1?

Anyhow f you put

<style>
pattern { color: blue }
</style>

At the beginning of the svg file, then Opera 9.2 and 9.5 alpha (that support pretty modern CSS) will show a blue pattern. It doesn't work in IE/ASV though and I don't believe FF(2) supports pattern yet.

David

----- Original Message -----
From: mitchwolberg
To: svg-***@yahoogroups.com
Sent: Tuesday, December 04, 2007 5:26 PM
Subject: [svg-developers] Re: Patterns + currentColor


I did see this discussion but didn't see where to change the currentColor.

http://tech.groups.yahoo.com/group/svg-developers/message/58035

Mitch





[Non-text portions of this message have been removed]



-----
To unsubscribe send a message to: svg-developers-***@yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----
Yahoo! Groups Links

<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
Individual Email | Traditional

<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)

<*> To change settings via email:
mailto:svg-developers-***@yahoogroups.com
mailto:svg-developers-***@yahoogroups.com

<*> To unsubscribe from this group, send an email to:
svg-developers-***@yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/