Loading ...
Sorry, an error occurred while loading the content.
 

Re: join or blend two rectangles

Expand Messages
  • tamsvg
    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
    Message 1 of 8 , Nov 2, 2004
      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 svg-developers@yahoogroups.com, Jérôme Tricand de la Goutte
      <jdelagou@l...> 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
    • Jérôme Tricand de la Goutte
      Hi Katharina I ve been a bit to fast. Here is your new code
      Message 2 of 8 , Nov 2, 2004
        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 svg-developers@yahoogroups.com, Jérôme Tricand de la Goutte
        ><jdelagou@l...> 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: svg-developers-unsubscribe@yahoogroups.com
        >-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
      • Holger Will
        hi, could you explain why you need to compose this shape of four individual shapes ? using filter is very processing intesive , and it gets worse the larger
        Message 3 of 8 , Nov 2, 2004
          hi,
          could you explain why you need to compose this shape of four individual
          shapes ?
          using filter is very processing intesive , and it gets worse the larger
          the filtering area is.
          i would really recommend, if possible, to use a different structure
          for your shape.
          for example the esiest way for your shape here would be:
          <path fill-rule="evenodd" d="M90,90 L 710 90 710 510 90 510z
          M110 110 L 690 110 690 490 110 490 z" fill="lightgreen"
          stroke="green" stroke-width="5"/>

          regards
          holger

          p.s.: may i suggest my little filter editor at
          http://www.treebuilder.de/svg/filterworkshop/workshop.svgz
          to play around with different filter primitives and combinations.
        • Philippe Lhoste
          ... http://www.svgopen.org/2002/papers/hirtzler__using_svg_filters/ http://www.digitalcraft.com.au/svg/tutorials/02/filterfetish.aspx
          Message 4 of 8 , Nov 3, 2004
            Jérôme Tricand de la Goutte wrote:
            > If you, or someone else know about a site where one could learn more
            > about filters, I would be pleased to know. Thanks

            http://www.svgopen.org/2002/papers/hirtzler__using_svg_filters/
            http://www.digitalcraft.com.au/svg/tutorials/02/filterfetish.aspx
            http://www.xml.com/pub/a/2004/06/02/svgtype.html
            http://wiki.svg.org/index.php/FilterExamples

            And probably a lot of other resources.
            Including the tool given by Holger...

            --
            Philippe Lhoste
            -- (near) Paris -- France
            -- Professional programmer and amateur artist
            -- http://Phi.Lho.free.fr
            -- -- -- -- -- -- -- -- -- -- -- --
          Your message has been successfully submitted and would be delivered to recipients shortly.