Hi Katharina
I've been a bit to fast.
Here is your new code
<svg viewBox="0 0 1000 1000">
<defs>
<filter id='Filtre_Contour' filterUnits='objectBoundingBox' x='-15%'
y='-15%' width='150%' height='150%'>
<feMorphology in='SourceAlpha' result='morphedAlpha' radius='0.5%'
operator='dilate'/>
<feComposite in='SourceGraphic' in2='morphedAlpha' operator='over'/>
</filter>
<g id="mygroup" >
<polyline points="90,90 110,90 110,510 90,510 90,90" />
<polyline points="90,490 90,510 710,510 710,490 90,490" />
<polyline points="690,510 710,510 710,90 690,90 690,510" />
<polyline points="710,90 710,110 90,110 90,90 710,90" />
</g>
</defs>
<rect x="0" y="0" width="1000" height="1000" fill="&backGroudColor;"/>
<use xlink:href='#mygroup' filter='url(#Filtre_Contour)'
onclick="myOnclickFunction(evt)" fill='&backGroudColor;' fill-opacity="1" />
</svg>
set &backGroudColor; to what ever you want.
If you want to change the stroke-width, set a new value to radius in
<feMorphology> the the gradient
If you want to change the stroke color, add a foodfleed objet in your
gradient. I do not have much time, neither a good comprehension of
filters to give you more details.
If you, or someone else know about a site where one could learn more
about filters, I would be pleased to know. Thanks
hope it helps
J�r�me
tamsvg wrote:
>Hi Jerome,
>
>thanks for answering. Yes, I only need the graphical fusion of my
>rect. But with your code all the 4 rects are filled black, I think
>because of the feMorphology filter. I need them without fill only
>with black stroke. Ideas?
>
>Katharina
>
>
>--- In [EMAIL PROTECTED], J�r�me Tricand de la Goutte
><[EMAIL PROTECTED]> wrote:
>
>
>>Hi Katharina
>>
>>I agree with Philippe, but, maybe you need not to have a composite
>>element, but just the graphical fusion of your rect.
>>what about using filters to simulate one object?
>>
>>Say :
>>
>><filter id='Filtre_Contour' filterUnits='objectBoundingBox' x='-
>>
>>
>10%'
>
>
>>y='-10%' width='150%' height='150%'>
>> <feMorphology in='SourceAlpha' result='morphedAlpha'
>>
>>
>radius='0.2%'
>
>
>>operator='dilate'/>
>> <feComposite in='SourceGraphic' in2='morphedAlpha'
>>
>>
>operator='over'/>
>
>
>></filter>
>><g id="mygroup" onclick="myOnclickFunction(evt)"
>>filter='url(#Filtre_Contour)' fill="none"/>
>> <polyline points="90,90 110,90 110,510 90,510 90,90"
>>filter="url:(#compose)" />
>> <polyline points="90,490 90,510 710,510 710,490 90,490" />
>> <polyline points="690,510 710,510 710,90 690,90 690,510" />
>> <polyline points="710,90 710,110 90,110 90,90 710,90" />
>></g>
>>
>>Hope it helps
>>
>>J�r�me
>>
>>
>>Philippe Lhoste wrote:
>>
>>
>>
>>>tamsvg wrote:
>>>
>>>
>>>
>>>
>>>>I've paint 4 rectangles (but I did it with polylines!)The 4
>>>>rectangles are overlapping each other. How can I blend them, so
>>>>
>>>>
>that
>
>
>>>>it looks like one element?
>>>>
>>>>Here's my code:
>>>>
>>>><?xml version="1.0" encoding='ISO-8859-1' ?>
>>>>
>>>><svg width="800" height="800" xmlns="http://www.w3.org/2000/svg";>
>>>>
>>>> <polyline points="90,90 110,90 110,510 90,510 90,90" stroke-
>>>>width="1" fill="none" stroke="black" filter="url:(#compose)" />
>>>> <polyline points="90,490 90,510 710,510 710,490 90,490"
>>>>
>>>>
>stroke-
>
>
>>>>width="1" fill="none" stroke="black" />
>>>> <polyline points="690,510 710,510 710,90 690,90 690,510"
>>>>
>>>>
>stroke-
>
>
>>>>width="1" fill="none" stroke="black" />
>>>> <polyline points="710,90 710,110 90,110 90,90 710,90" stroke-
>>>>width="1" fill="none" stroke="black" />
>>>></svg>
>>>>
>>>>Can anybody help me?
>>>>Katharina
>>>>
>>>>
>>>>
>>>>
>>>I believe that you have to do the maths yourself, ie. SVG 1.1 has
>>>nothing to join/blend/merge/solder shapes.
>>>SVG 1.2 will have this feature.
>>>
>>>As always in this kind of question, I point to Kevin Lindsey site
>>><http://www.kevlindev.com/geometry/index.htm> which has a
>>>
>>>
>comprehensive
>
>
>>>set of JavaScript routines for geometry maths applied to SVG.
>>>
>>>Well, I am not sure you will find the solution of your problem
>>>
>>>
>here, but
>
>
>>>the maths for rectangle intersections are quite simple, I think.
>>>
>>>If really you are lost, I will try and do the maths, it is an
>>>interesting problem.
>>>
>>>Note: Since you are making closed shapes, maybe you can specify
>>>
>>>
>them
>
>
>>>with polygon, with fill="none". This avoid to repeat the initial
>>>
>>>
>point
>
>
>>>as last point.
>>>
>>>
>>>
>>>
>>>
>>--
>>J�r�me Tricand de la Goutte
>>
>>Soci�t� Logatique
>>50 rue Marcel Dassault
>>92100 Boulogne-Billancourt
>>
>>01 46 21 59 59
>>
>>
>
>
>
>
>
>
>-----
>To unsubscribe send a message to: [EMAIL PROTECTED]
>-or-
>visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
>----
>Yahoo! Groups Links
>
>
>
>
>
>
>
>
>
>
--
J�r�me Tricand de la Goutte
Soci�t� Logatique
50 rue Marcel Dassault
92100 Boulogne-Billancourt
01 46 21 59 59
------------------------ Yahoo! Groups Sponsor --------------------~-->
$9.95 domain names from Yahoo!. Register anything.
http://us.click.yahoo.com/J8kdrA/y20IAA/yQLSAA/1U_rlB/TM
--------------------------------------------------------------------~->
-----
To unsubscribe send a message to: [EMAIL PROTECTED]
-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/
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
