/    Sign up×
Community /Pin to ProfileBookmark

ColorFill help!

Copy linkTweet thisAlerts:
Jun 03.2009

I have the following code working but I am trying to have add another rectangle (mySecondRect) and when you click on the second rectangle it “stores” the red color then when you click on myFirstRect that is when the color of the myFirstRect changes to red.

Similar to an online coloring book. You pick the color and then you want to fill the other rectangle with that color onClick…

I hope that makes sense and any assistance would be greatly appreciated!

lab12

[CODE]<svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” width=”300″ height=”300″>
<script type=”text/ecmascript”>
<![CDATA[
function changeRectColor(evt) {
evt.target.setAttributeNS(null,”fill”,”red”);

}
]]>
</script>
<g id=”firstGroup”>
<rect id=”myFirstRect” width=”100″ height=”50″ x=”40″ y=”20″ fill=”blue” onclick=”changeRectColor(evt)”/>

</g>
</svg>
[/CODE]

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@astupidnameJun 04.2009 — I can't say I ever played around with the svg stuff before, find it somewhat interesting (thanks to the help of w3schools tutorial), too bad IE doesn't support it.. of course. At any rate, I was doodling around with it a bit, and the below should take you the direction you wanted (I tested in FF3 & Safari 3 Windows only so far):

&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300" style="background-color:beige;"&gt;
&lt;script type="text/ecmascript"&gt;
&lt;![CDATA[
//Just a few things I noted while playing around:
//FF supports the use of the word 'transparent' for fill color (and onclick's will register), but Safari does not
//FF &amp; Safari support the use of the word 'none' for fill color, but onclick's won't register then on the element
//and apparently (or obviously -these are mainly notes for myself), fill color defaults to black if not specified

<i> </i>var paint = {
<i> </i> color : 'white',
<i> </i> fill : function (el) {
<i> </i> el.style.setProperty('fill', this.color, '');
<i> </i> el.style.setProperty('stroke-width', 0, '');
<i> </i> },
<i> </i> set : function (el) {
<i> </i> var i, ceSty,
<i> </i> fillColor = el.style.getPropertyValue('fill'),
<i> </i> colorElements = document.getElementById('colorChoices').getElementsByTagName('rect');
<i> </i> this.color = fillColor; //set the color that will be used by paint.fill later
<i> </i> //set the stroke width wide on the selected color choice rect to signify it is selected, and set the others to 0 stroke-width:
<i> </i> for (i = 0; i &lt; colorElements.length; i++) {
<i> </i> ceSty = colorElements[i].style;
<i> </i> if (ceSty.getPropertyValue('fill') == fillColor) {
<i> </i> ceSty.setProperty('stroke-width', 3, '');
<i> </i> } else {
<i> </i> ceSty.setProperty('stroke-width', 0, '');
<i> </i> }
<i> </i> }
<i> </i> }
<i> </i>};

]]&gt;
&lt;/script&gt;
&lt;g id="firstGroup"&gt;
&lt;rect id="myFirstRect" width="100" height="50" x="40" y="20" style="fill:white; stroke-width:1; stroke:black;" onclick="paint.fill(this)"/&gt;
&lt;rect id="mySecondRect" width="100" height="50" x="160" y="20" style="fill:white; stroke-width:1; stroke:black;" onclick="paint.fill(this)"/&gt;
&lt;/g&gt;
&lt;g id="colorChoices"&gt;
&lt;rect width="20" height="20" x="40" y="80" style="fill:red; stroke:orange;" onclick="paint.set(this);"/&gt;
&lt;rect width="20" height="20" x="70" y="80" style="fill:green; stroke:orange;" onclick="paint.set(this);"/&gt;
&lt;rect width="20" height="20" x="100" y="80" style="fill:blue; stroke:orange;" onclick="paint.set(this);"/&gt;
&lt;rect width="20" height="20" x="130" y="80" style="fill:black; stroke:orange;" onclick="paint.set(this);"/&gt;
&lt;/g&gt;
&lt;/svg&gt;
Copy linkTweet thisAlerts:
@lab12authorJun 04.2009 — astupidname, you rock! ?

I have been trying to figure this out for over a week... I am on a mac and it works perfect... Words cannot say how appreciative I am...

Thanks again!

lab12
Copy linkTweet thisAlerts:
@astupidnameJun 04.2009 — I'm thrilled you're thrilled and you are welcome!
×

Success!

Help @lab12 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...