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

Re: [svg-developers] Re: zoom/pan svg image, only inside a frame

Expand Messages
  • Holger Will
    Hi Maria ... i forgot that getScreenCTM() is not implemented in ASV3. i use ASV6. the workaround for ASV3 is a bit more complicated. see code at the end of
    Message 1 of 15 , Jul 19, 2005
    • 0 Attachment
      Hi Maria

      >
      >
      > Hi Holger,
      >
      > I tried it in internet explorer with svgviewer 3 and there is an
      > error message: Microsoft JScript runtime error- "Object doesn't
      > support this property or method Line: 4, column: 0"

      i forgot that getScreenCTM() is not implemented in ASV3. i use ASV6.
      the workaround for ASV3 is a bit more complicated. see code at the end
      of this post.

      >
      > I also tried it in Opera (no error messages), but all elements seem
      > to zoomed in/out together...nothing stays stable in shape.

      Opera only supports SVGTiny 1.1 there is not script controll !!!

      >
      > Do I do something wrong?

      no, my mistake!

      >
      > Thanks,
      >
      >
      here is the working code for ASV3,
      of course it works in ASV6 as well as in firefox with native svg support,
      though in firefox, zoom and pan events are not implemented.

      <?xml version="1.0"?>
      <svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink" onload="reposition()"
      onscroll="reposition()" onzoom="reposition()" onresize="reposition()"
      viewBox="0 0 1024 768" >
      <script><![CDATA[
      function reposition(){

      g=document.getElementById("fixedContent")
      m=getScreenCTM(document.documentElement)
      m=m.inverse()
      g.setAttribute("transform","matrix("+m.a+",0,0,"+m.d+","+m.e+","+m.f+")")
      }



      function getScreenCTM(doc){
      //my own implementation of getScreenCTM as the one found in gecko is
      currently broken see bug:
      var root=doc
      var sCTM= root.createSVGMatrix()

      var tr= root.createSVGMatrix()
      var par=root.getAttribute("preserveAspectRatio")
      if (par==null || par=="") par="xMidYMid meet"//setting to default value
      parX=par.substring(0,4) //xMin;xMid;xMax
      parY=par.substring(4,8)//YMin;YMid;YMax;
      ma=par.split(" ")
      mos=ma[1] //meet;slice

      //get dimensions of the viewport
      sCTM.a= 1
      sCTM.d=1
      sCTM.e= 0
      sCTM.f=0



      w=root.getAttribute("width")
      if (w==null || w=="") w=innerWidth
      h=root.getAttribute("height")
      if (h==null || h=="") h=innerHeight

      // get the ViewBox
      vba=root.getAttribute("viewBox")
      if(vba==null) vba="0 0 "+w+" "+h
      var vb=vba.split(" ")//get the viewBox into an array

      //--------------------------------------------------------------------------
      //create a matrix with current user transformation
      tr.a= root.currentScale
      tr.d=root.currentScale
      tr.e= root.currentTranslate.x
      tr.f=root.currentTranslate.y



      //scale factors
      sx=w/vb[2]
      sy=h/vb[3]

      //meetOrSlice
      if(mos=="slice"){
      s=(sx>sy ? sx:sy)
      }else{
      s=(sx<sy ? sx:sy)
      }

      //preserveAspectRatio="none"
      if (par=="none"){
      sCTM.a=sx//scaleX
      sCTM.d=sy//scaleY
      sCTM.e=- vb[0]*sx //translateX
      sCTM.f=- vb[0]*sy //translateY
      sCTM=tr.multiply(sCTM)//taking user transformations into acount

      return sCTM
      }


      sCTM.a=s //scaleX
      sCTM.d=s//scaleY
      //-------------------------------------------------------
      switch(parX){
      case "xMid":
      sCTM.e=((w-vb[2]*s)/2) - vb[0]*s //translateX

      break;
      case "xMin":
      sCTM.e=- vb[0]*s//translateX
      break;
      case "xMax":
      sCTM.e=(w-vb[2]*s)- vb[0]*s //translateX
      break;
      }
      //------------------------------------------------------------
      switch(parY){
      case "YMid":
      sCTM.f=(h-vb[3]*s)/2 - vb[1]*s //translateY
      break;
      case "YMin":
      sCTM.f=- vb[1]*s//translateY
      break;
      case "YMax":
      sCTM.f=(h-vb[3]*s) - vb[1]*s //translateY
      break;
      }
      sCTM=tr.multiply(sCTM)//taking user transformations into acount

      return sCTM
      }
      ]]> </script>
      <g>
      <rect x="0" y="0" width="1024" height="768"/>
      </g>
      <g id="fixedContent">
      <rect x="0" y="0" width="200" height="768" fill="green"/>
      </g>
      </svg>

      hth
      Holger
    • spanakimaria
      ... ASV6. ... the end ... seem ... support, ... () ... ( +m.a+ ,0,0, +m.d+ , +m.e+ , +m.f+ ) ) ... is ... value ... Hi again, I still get some error messages
      Message 2 of 15 , Jul 19, 2005
      • 0 Attachment
        --- In svg-developers@yahoogroups.com, Holger Will <holger@t...>
        wrote:
        > Hi Maria
        >
        > >
        > >
        > > Hi Holger,
        > >
        > > I tried it in internet explorer with svgviewer 3 and there is an
        > > error message: Microsoft JScript runtime error- "Object doesn't
        > > support this property or method Line: 4, column: 0"
        >
        > i forgot that getScreenCTM() is not implemented in ASV3. i use
        ASV6.
        > the workaround for ASV3 is a bit more complicated. see code at
        the end
        > of this post.
        >
        > >
        > > I also tried it in Opera (no error messages), but all elements
        seem
        > > to zoomed in/out together...nothing stays stable in shape.
        >
        > Opera only supports SVGTiny 1.1 there is not script controll !!!
        >
        > >
        > > Do I do something wrong?
        >
        > no, my mistake!
        >
        > >
        > > Thanks,
        > >
        > >
        > here is the working code for ASV3,
        > of course it works in ASV6 as well as in firefox with native svg
        support,
        > though in firefox, zoom and pan events are not implemented.
        >
        > <?xml version="1.0"?>
        > <svg xmlns="http://www.w3.org/2000/svg"
        > xmlns:xlink="http://www.w3.org/1999/xlink" onload="reposition()"
        > onscroll="reposition()" onzoom="reposition()" onresize="reposition
        ()"
        > viewBox="0 0 1024 768" >
        > <script><![CDATA[
        > function reposition(){
        >
        > g=document.getElementById("fixedContent")
        > m=getScreenCTM(document.documentElement)
        > m=m.inverse()
        > g.setAttribute("transform","matrix
        ("+m.a+",0,0,"+m.d+","+m.e+","+m.f+")")
        > }
        >
        >
        >
        > function getScreenCTM(doc){
        > //my own implementation of getScreenCTM as the one found in gecko
        is
        > currently broken see bug:
        > var root=doc
        > var sCTM= root.createSVGMatrix()
        >
        > var tr= root.createSVGMatrix()
        > var par=root.getAttribute("preserveAspectRatio")
        > if (par==null || par=="") par="xMidYMid meet"//setting to default
        value
        > parX=par.substring(0,4) //xMin;xMid;xMax
        > parY=par.substring(4,8)//YMin;YMid;YMax;
        > ma=par.split(" ")
        > mos=ma[1] //meet;slice
        >
        > //get dimensions of the viewport
        > sCTM.a= 1
        > sCTM.d=1
        > sCTM.e= 0
        > sCTM.f=0
        >
        >
        >
        > w=root.getAttribute("width")
        > if (w==null || w=="") w=innerWidth
        > h=root.getAttribute("height")
        > if (h==null || h=="") h=innerHeight
        >
        > // get the ViewBox
        > vba=root.getAttribute("viewBox")
        > if(vba==null) vba="0 0 "+w+" "+h
        > var vb=vba.split(" ")//get the viewBox into an array
        >
        > //-----------------------------------------------------------------
        ---------
        > //create a matrix with current user transformation
        > tr.a= root.currentScale
        > tr.d=root.currentScale
        > tr.e= root.currentTranslate.x
        > tr.f=root.currentTranslate.y
        >
        >
        >
        > //scale factors
        > sx=w/vb[2]
        > sy=h/vb[3]
        >
        > //meetOrSlice
        > if(mos=="slice"){
        > s=(sx>sy ? sx:sy)
        > }else{
        > s=(sx<sy ? sx:sy)
        > }
        >
        > //preserveAspectRatio="none"
        > if (par=="none"){
        > sCTM.a=sx//scaleX
        > sCTM.d=sy//scaleY
        > sCTM.e=- vb[0]*sx //translateX
        > sCTM.f=- vb[0]*sy //translateY
        > sCTM=tr.multiply(sCTM)//taking user transformations into acount
        >
        > return sCTM
        > }
        >
        >
        > sCTM.a=s //scaleX
        > sCTM.d=s//scaleY
        > //-------------------------------------------------------
        > switch(parX){
        > case "xMid":
        > sCTM.e=((w-vb[2]*s)/2) - vb[0]*s //translateX
        >
        > break;
        > case "xMin":
        > sCTM.e=- vb[0]*s//translateX
        > break;
        > case "xMax":
        > sCTM.e=(w-vb[2]*s)- vb[0]*s //translateX
        > break;
        > }
        > //------------------------------------------------------------
        > switch(parY){
        > case "YMid":
        > sCTM.f=(h-vb[3]*s)/2 - vb[1]*s //translateY
        > break;
        > case "YMin":
        > sCTM.f=- vb[1]*s//translateY
        > break;
        > case "YMax":
        > sCTM.f=(h-vb[3]*s) - vb[1]*s //translateY
        > break;
        > }
        > sCTM=tr.multiply(sCTM)//taking user transformations into acount
        >
        > return sCTM
        > }
        > ]]> </script>
        > <g>
        > <rect x="0" y="0" width="1024" height="768"/>
        > </g>
        > <g id="fixedContent">
        > <rect x="0" y="0" width="200" height="768" fill="green"/>
        > </g>
        > </svg>
        >
        > hth
        > Holger

        Hi again,

        I still get some error messages in asv 3 even with the new code you
        wrote, but since I installed asv 6 the first code worked fine!
        So, thanks a lot!

        Maria
      • spanakimaria
        ... ASV6. ... the end ... seem ... support, ... () ... ( +m.a+ ,0,0, +m.d+ , +m.e+ , +m.f+ ) ) ... is ... value ... Hi again, I still get some error messages
        Message 3 of 15 , Jul 19, 2005
        • 0 Attachment
          --- In svg-developers@yahoogroups.com, Holger Will <holger@t...>
          wrote:
          > Hi Maria
          >
          > >
          > >
          > > Hi Holger,
          > >
          > > I tried it in internet explorer with svgviewer 3 and there is an
          > > error message: Microsoft JScript runtime error- "Object doesn't
          > > support this property or method Line: 4, column: 0"
          >
          > i forgot that getScreenCTM() is not implemented in ASV3. i use
          ASV6.
          > the workaround for ASV3 is a bit more complicated. see code at
          the end
          > of this post.
          >
          > >
          > > I also tried it in Opera (no error messages), but all elements
          seem
          > > to zoomed in/out together...nothing stays stable in shape.
          >
          > Opera only supports SVGTiny 1.1 there is not script controll !!!
          >
          > >
          > > Do I do something wrong?
          >
          > no, my mistake!
          >
          > >
          > > Thanks,
          > >
          > >
          > here is the working code for ASV3,
          > of course it works in ASV6 as well as in firefox with native svg
          support,
          > though in firefox, zoom and pan events are not implemented.
          >
          > <?xml version="1.0"?>
          > <svg xmlns="http://www.w3.org/2000/svg"
          > xmlns:xlink="http://www.w3.org/1999/xlink" onload="reposition()"
          > onscroll="reposition()" onzoom="reposition()" onresize="reposition
          ()"
          > viewBox="0 0 1024 768" >
          > <script><![CDATA[
          > function reposition(){
          >
          > g=document.getElementById("fixedContent")
          > m=getScreenCTM(document.documentElement)
          > m=m.inverse()
          > g.setAttribute("transform","matrix
          ("+m.a+",0,0,"+m.d+","+m.e+","+m.f+")")
          > }
          >
          >
          >
          > function getScreenCTM(doc){
          > //my own implementation of getScreenCTM as the one found in gecko
          is
          > currently broken see bug:
          > var root=doc
          > var sCTM= root.createSVGMatrix()
          >
          > var tr= root.createSVGMatrix()
          > var par=root.getAttribute("preserveAspectRatio")
          > if (par==null || par=="") par="xMidYMid meet"//setting to default
          value
          > parX=par.substring(0,4) //xMin;xMid;xMax
          > parY=par.substring(4,8)//YMin;YMid;YMax;
          > ma=par.split(" ")
          > mos=ma[1] //meet;slice
          >
          > //get dimensions of the viewport
          > sCTM.a= 1
          > sCTM.d=1
          > sCTM.e= 0
          > sCTM.f=0
          >
          >
          >
          > w=root.getAttribute("width")
          > if (w==null || w=="") w=innerWidth
          > h=root.getAttribute("height")
          > if (h==null || h=="") h=innerHeight
          >
          > // get the ViewBox
          > vba=root.getAttribute("viewBox")
          > if(vba==null) vba="0 0 "+w+" "+h
          > var vb=vba.split(" ")//get the viewBox into an array
          >
          > //-----------------------------------------------------------------
          ---------
          > //create a matrix with current user transformation
          > tr.a= root.currentScale
          > tr.d=root.currentScale
          > tr.e= root.currentTranslate.x
          > tr.f=root.currentTranslate.y
          >
          >
          >
          > //scale factors
          > sx=w/vb[2]
          > sy=h/vb[3]
          >
          > //meetOrSlice
          > if(mos=="slice"){
          > s=(sx>sy ? sx:sy)
          > }else{
          > s=(sx<sy ? sx:sy)
          > }
          >
          > //preserveAspectRatio="none"
          > if (par=="none"){
          > sCTM.a=sx//scaleX
          > sCTM.d=sy//scaleY
          > sCTM.e=- vb[0]*sx //translateX
          > sCTM.f=- vb[0]*sy //translateY
          > sCTM=tr.multiply(sCTM)//taking user transformations into acount
          >
          > return sCTM
          > }
          >
          >
          > sCTM.a=s //scaleX
          > sCTM.d=s//scaleY
          > //-------------------------------------------------------
          > switch(parX){
          > case "xMid":
          > sCTM.e=((w-vb[2]*s)/2) - vb[0]*s //translateX
          >
          > break;
          > case "xMin":
          > sCTM.e=- vb[0]*s//translateX
          > break;
          > case "xMax":
          > sCTM.e=(w-vb[2]*s)- vb[0]*s //translateX
          > break;
          > }
          > //------------------------------------------------------------
          > switch(parY){
          > case "YMid":
          > sCTM.f=(h-vb[3]*s)/2 - vb[1]*s //translateY
          > break;
          > case "YMin":
          > sCTM.f=- vb[1]*s//translateY
          > break;
          > case "YMax":
          > sCTM.f=(h-vb[3]*s) - vb[1]*s //translateY
          > break;
          > }
          > sCTM=tr.multiply(sCTM)//taking user transformations into acount
          >
          > return sCTM
          > }
          > ]]> </script>
          > <g>
          > <rect x="0" y="0" width="1024" height="768"/>
          > </g>
          > <g id="fixedContent">
          > <rect x="0" y="0" width="200" height="768" fill="green"/>
          > </g>
          > </svg>
          >
          > hth
          > Holger

          Hi again,

          I still get some error messages in asv 3 even with the new code you
          wrote, but since I installed asv 6 the first code worked fine!
          So, thanks a lot!

          Maria
        • Bart
          ... An alternative to the reverse transforms suggested (which I believe can be slightly buggy, I ve read one viewers misimplements a CTM function, possibly not
          Message 4 of 15 , Jul 19, 2005
          • 0 Attachment
            On 7/18/05, spanakimaria <spanakimaria@...> wrote:
            > How can I have an svg frame that can not be panned or zoomed, and an
            > svg image inside the frame that allows zoom and pan?

            An alternative to the reverse transforms suggested (which I believe can
            be slightly buggy, I've read one viewers misimplements a CTM function,
            possibly not screenCTM) is setting zoomAndPan="disable" and
            implementing dragging and zooming by interpreting mouse and key
            events yourself - I have, to make dragging only work inside a viewport
            that displays maps. It does mean you have to reimplement a bunch
            of things that are already available, and that getting at viewport
            coordinates is less accurate as you have to calculate that yourself too.

            (See http://svg.scarfboy.com/newiface/test.svg but consider I'm actively
            working on that. If interested, I'll help make sense of the mess of code)

            --Bart
          • Manuel Cañón López
            Hi, at the moment I m doing some trials with the filter feGaussianBlur, applied to a rectangle. It works fine but I have one problem: i want the shadow
            Message 5 of 15 , Jul 19, 2005
            • 0 Attachment
              Hi, at the moment I'm doing some trials with the filter feGaussianBlur,
              applied to a rectangle. It works fine but I have one problem: i want the
              "shadow effect" (the one got with the gauss filter) with rounded corner.
              And it seems that the rx and ry attributes of the rectangle don't
              work...

              Has anyone a hint?

              thanks!
            • Holger Will
              ... Hi Manuel rounded corners shouldnt be a problem. if you post your code here, i may be able to help. cheers Holger
              Message 6 of 15 , Jul 19, 2005
              • 0 Attachment
                Manuel Cañón López schrieb:

                > Hi, at the moment I'm doing some trials with the filter feGaussianBlur,
                > applied to a rectangle. It works fine but I have one problem: i want the
                > "shadow effect" (the one got with the gauss filter) with rounded corner.
                > And it seems that the rx and ry attributes of the rectangle don't
                > work...
                >
                > Has anyone a hint?
                >
                > thanks!
                >
                Hi Manuel
                rounded corners shouldnt be a problem.
                if you post your code here, i may be able to help.

                cheers
                Holger
              • Manuel Cañón López
                ... Hi Holger, tranks for answering, the code is something like:
                Message 7 of 15 , Jul 19, 2005
                • 0 Attachment
                  El mar, 19-07-2005 a las 14:05 +0200, Holger Will escribió:
                  > Manuel Cañón López schrieb:
                  >
                  > > Hi, at the moment I'm doing some trials with the filter feGaussianBlur,
                  > > applied to a rectangle. It works fine but I have one problem: i want the
                  > > "shadow effect" (the one got with the gauss filter) with rounded corner.
                  > > And it seems that the rx and ry attributes of the rectangle don't
                  > > work...
                  > >
                  > > Has anyone a hint?
                  > >
                  > > thanks!
                  > >
                  > Hi Manuel
                  > rounded corners shouldnt be a problem.
                  > if you post your code here, i may be able to help.
                  >
                  > cheers
                  > Holger
                  >

                  Hi Holger, tranks for answering, the code is something like:

                  <defs>
                  <filter id="gaussFilter">
                  <feGaussianBlur stdDeviation="10.0"/>
                  <feOffset dx="10.0" dy="5.0"/>
                  </filter>
                  </defs>
                  <rect
                  rx="115" ry="115" width="107.5" x="333.3333333333333"
                  y="300.0"
                  class="gauss" filter="url(#gaussFilter)" height="23.0">
                  <set attributeName="fill" attributeType="CSS"
                  begin="element1.click" to="red"/>
                  </rect>
                  <rect height="20.0" rx="5" ry="5" stroke="black" width="112.5"
                  x="333.3333333333333" y="300.0">
                  <set attributeName="fill" attributeType="CSS"
                  begin="element1.click" to="red"/>
                  </rect>

                  I create two rectangles: one with the information (the second one) and
                  another (the one that should be a kind of shadow), the first one.
                  The second rectangle, the one with no filter goes fine: the corners are
                  rounded, but the first one has normal corners.

                  Thanks for the sugerences!
                • Holger Will
                  ... Manuel, what you are seeing here, is that the filter output gets cliped. you can enlarge the clipping region by specifieing x/y/width/height on the filter
                  Message 8 of 15 , Jul 19, 2005
                  • 0 Attachment
                    Manuel Cañón López schrieb:

                    >El mar, 19-07-2005 a las 14:05 +0200, Holger Will escribió:
                    >
                    >
                    >>Manuel Cañón López schrieb:
                    >>
                    >>
                    >>
                    >>>Hi, at the moment I'm doing some trials with the filter feGaussianBlur,
                    >>>applied to a rectangle. It works fine but I have one problem: i want the
                    >>>"shadow effect" (the one got with the gauss filter) with rounded corner.
                    >>>And it seems that the rx and ry attributes of the rectangle don't
                    >>>work...
                    >>>
                    >>>Has anyone a hint?
                    >>>
                    >>>thanks!
                    >>>
                    >>>
                    >>>
                    >>Hi Manuel
                    >>rounded corners shouldnt be a problem.
                    >>if you post your code here, i may be able to help.
                    >>
                    >>cheers
                    >>Holger
                    >>
                    >>
                    >>
                    >
                    >Hi Holger, tranks for answering, the code is something like:
                    >
                    > <defs>
                    > <filter id="gaussFilter">
                    > <feGaussianBlur stdDeviation="10.0"/>
                    > <feOffset dx="10.0" dy="5.0"/>
                    > </filter>
                    > </defs>
                    > <rect
                    > rx="115" ry="115" width="107.5" x="333.3333333333333"
                    >y="300.0"
                    > class="gauss" filter="url(#gaussFilter)" height="23.0">
                    > <set attributeName="fill" attributeType="CSS"
                    > begin="element1.click" to="red"/>
                    > </rect>
                    > <rect height="20.0" rx="5" ry="5" stroke="black" width="112.5"
                    > x="333.3333333333333" y="300.0">
                    > <set attributeName="fill" attributeType="CSS"
                    > begin="element1.click" to="red"/>
                    > </rect>
                    >
                    >I create two rectangles: one with the information (the second one) and
                    >another (the one that should be a kind of shadow), the first one.
                    >The second rectangle, the one with no filter goes fine: the corners are
                    >rounded, but the first one has normal corners.
                    >
                    >Thanks for the sugerences!
                    >
                    >
                    >
                    Manuel,
                    what you are seeing here, is that the filter output gets cliped. you can
                    enlarge the clipping region by specifieing x/y/width/height on the
                    filter element.
                    <filter id="gaussFilter" x="-0.2" y="-1" width="1.4" height="3">
                    <feGaussianBlur stdDeviation="10.0"/>
                    <feOffset dx="10.0" dy="5.0"/>
                    </filter>
                    hth
                    Holger
                  • Manuel Cañón López
                    ... Hi, I ve been reading something and trying this things you told me, but the corners are still normal, they are not rounded (the corners of the rect element
                    Message 9 of 15 , Jul 19, 2005
                    • 0 Attachment
                      > >
                      > Manuel,
                      > what you are seeing here, is that the filter output gets cliped. you can
                      > enlarge the clipping region by specifieing x/y/width/height on the
                      > filter element.
                      > <filter id="gaussFilter" x="-0.2" y="-1" width="1.4" height="3">
                      > <feGaussianBlur stdDeviation="10.0"/>
                      > <feOffset dx="10.0" dy="5.0"/>
                      > </filter>
                      > hth
                      > Holger
                      >
                      >
                      Hi, I've been reading something and trying this things you told me, but
                      the corners are still normal, they are not rounded (the corners of the
                      rect element defined with the gaussfilter.
                      Am I missing something? (I'm sure I do)

                      Thanks
                    • Garry Haywood
                      ... you can ... the ... height= 3 ... me, but ... the ... The effect of the Gaussian filtr is to spread out the element by diffusion - as result what you
                      Message 10 of 15 , Jul 20, 2005
                      • 0 Attachment
                        --- In svg-developers@yahoogroups.com, Manuel Ca񳮠L󰥺
                        <manuel.canon@f...> wrote:
                        > > >
                        > > Manuel,
                        > > what you are seeing here, is that the filter output gets cliped.
                        you can
                        > > enlarge the clipping region by specifieing x/y/width/height on
                        the
                        > > filter element.
                        > > <filter id="gaussFilter" x="-0.2" y="-1" width="1.4"
                        height="3">
                        > > <feGaussianBlur stdDeviation="10.0"/>
                        > > <feOffset dx="10.0" dy="5.0"/>
                        > > </filter>
                        > > hth
                        > > Holger
                        > >
                        > >
                        > Hi, I've been reading something and trying this things you told
                        me, but
                        > the corners are still normal, they are not rounded (the corners of
                        the
                        > rect element defined with the gaussfilter.
                        > Am I missing something? (I'm sure I do)
                        >
                        > Thanks

                        The effect of the Gaussian filtr is to spread out the element by
                        diffusion - as result what you seeing is not that the blur has square
                        corners, you are just seeing a limited view

                        Can i suggest that, for test purposes, you do the following:

                        1) Move the underlying element away from the button so you can see
                        some changes

                        2) add height and width to the filter element by %
                        try 100% , 400%, 800%

                        3) change the StD of the blur
                        try 10 5 2

                        4) change the rx and ry of your underlying <rect>
                        try 115 65 40 20

                        I think this might help you understand what the filter is doing

                        i changed your code like this

                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                        <desc>
                        <!-- put a description here -->
                        </desc>
                        <defs>
                        <filter id="gaussFilter" width="800%" height="800%" >
                        <feGaussianBlur stdDeviation="5.0"/>
                        <feOffset dx="4.0" dy="2.0"/>
                        </filter>
                        </defs>
                        <rect id="underlying"
                        rx="20" ry="20" width="117" height="23.0"
                        x="333.3333333333333"
                        y="300.0"
                        class="gauss" filter="url(#gaussFilter)" >
                        <set attributeName="fill" attributeType="CSS"
                        begin="element1.click" to="red"/>
                        </rect>
                        <rect id="button" height="20.0" rx="5" ry="5" stroke="black"
                        width="112.5"
                        x="333.3333333333333" y="300.0">
                        <set attributeName="fill" attributeType="CSS"
                        begin="element1.click" to="red"/>
                        </rect>

                        </svg>

                        please let me know if this helps...
                      • Manuel Cañón López
                        ... Great... I did not realize until now of the limited view... ... Yes, it did! thanks!!!! ... It helped a lot, overall the width and height filter
                        Message 11 of 15 , Jul 20, 2005
                        • 0 Attachment
                          >
                          > The effect of the Gaussian filtr is to spread out the element by
                          > diffusion - as result what you seeing is not that the blur has square
                          > corners, you are just seeing a limited view
                          >
                          Great... I did not realize until now of the limited view...

                          > Can i suggest that, for test purposes, you do the following:
                          >
                          > 1) Move the underlying element away from the button so you can see
                          > some changes
                          >
                          > 2) add height and width to the filter element by %
                          > try 100% , 400%, 800%
                          >
                          > 3) change the StD of the blur
                          > try 10 5 2
                          >
                          > 4) change the rx and ry of your underlying <rect>
                          > try 115 65 40 20
                          >
                          > I think this might help you understand what the filter is doing
                          >
                          Yes, it did! thanks!!!!

                          > i changed your code like this
                          >
                          > <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                          > <desc>
                          > <!-- put a description here -->
                          > </desc>
                          > <defs>
                          > <filter id="gaussFilter" width="800%" height="800%" >
                          > <feGaussianBlur stdDeviation="5.0"/>
                          > <feOffset dx="4.0" dy="2.0"/>
                          > </filter>
                          > </defs>
                          > <rect id="underlying"
                          > rx="20" ry="20" width="117" height="23.0"
                          > x="333.3333333333333"
                          > y="300.0"
                          > class="gauss" filter="url(#gaussFilter)" >
                          > <set attributeName="fill" attributeType="CSS"
                          > begin="element1.click" to="red"/>
                          > </rect>
                          > <rect id="button" height="20.0" rx="5" ry="5" stroke="black"
                          > width="112.5"
                          > x="333.3333333333333" y="300.0">
                          > <set attributeName="fill" attributeType="CSS"
                          > begin="element1.click" to="red"/>
                          > </rect>
                          >
                          > </svg>
                          >
                          > please let me know if this helps...

                          It helped a lot, overall the width and height filter attribute.. now it
                          looks great.

                          Thanks again!
                        • Garry Haywood
                          you may also want add the x and y to the filter with negative amounts so you can see the full effect of the filter glad it worked for you Garry
                          Message 12 of 15 , Jul 20, 2005
                          • 0 Attachment
                            you may also want add the x and y to the filter with negative amounts
                            so you can see the full effect of the filter

                            glad it worked for you

                            Garry

                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                            <desc>
                            <!-- put a description here -->
                            </desc>
                            <defs>
                            <filter id="gaussFilter" x="-100%" y="-100%" width="500%"
                            height="500%" >
                            <feGaussianBlur stdDeviation="4" />
                            <feOffset dx="1.0" dy="2.0" />
                            </filter>
                            </defs>
                            <rect id="underlying"
                            rx="5" ry="5" width="117" height="23.0"
                            x="333.3333333333333"
                            y="300.0"
                            class="gauss" filter="url(#gaussFilter)" >
                            <set attributeName="fill" attributeType="CSS"
                            begin="button.click" to="red"/>
                            </rect>
                            <rect id="button" height="20.0" rx="5" ry="5" stroke="black"
                            width="112.5"
                            x="333.3333333333333" y="300.0">
                            <set attributeName="fill" attributeType="CSS"
                            begin="click" to="red"/>
                            </rect>

                            </svg>

                            --- In svg-developers@yahoogroups.com, Manuel Ca񳮠L󰥺
                            <manuel.canon@f...> wrote:
                            >
                            > >
                            > > The effect of the Gaussian filtr is to spread out the element by
                            > > diffusion - as result what you seeing is not that the blur has
                            square
                            > > corners, you are just seeing a limited view
                            > >
                            > Great... I did not realize until now of the limited view...
                            >
                            > > Can i suggest that, for test purposes, you do the following:
                            > >
                            > > 1) Move the underlying element away from the button so you can
                            see
                            > > some changes
                            > >
                            > > 2) add height and width to the filter element by %
                            > > try 100% , 400%, 800%
                            > >
                            > > 3) change the StD of the blur
                            > > try 10 5 2
                            > >
                            > > 4) change the rx and ry of your underlying <rect>
                            > > try 115 65 40 20
                            > >
                            > > I think this might help you understand what the filter is doing
                            > >
                            > Yes, it did! thanks!!!!
                            >
                            > > i changed your code like this
                            > >
                            > > <svg xmlns="http://www.w3.org/2000/svg" width="100%"
                            height="100%">
                            > > <desc>
                            > > <!-- put a description here -->
                            > > </desc>
                            > > <defs>
                            > > <filter id="gaussFilter" width="800%" height="800%" >
                            > > <feGaussianBlur stdDeviation="5.0"/>
                            > > <feOffset dx="4.0" dy="2.0"/>
                            > > </filter>
                            > > </defs>
                            > > <rect id="underlying"
                            > > rx="20" ry="20" width="117" height="23.0"
                            > > x="333.3333333333333"
                            > > y="300.0"
                            > > class="gauss" filter="url(#gaussFilter)" >
                            > > <set attributeName="fill" attributeType="CSS"
                            > > begin="element1.click" to="red"/>
                            > > </rect>
                            > > <rect id="button" height="20.0" rx="5" ry="5"
                            stroke="black"
                            > > width="112.5"
                            > > x="333.3333333333333" y="300.0">
                            > > <set attributeName="fill" attributeType="CSS"
                            > > begin="element1.click" to="red"/>
                            > > </rect>
                            > >
                            > > </svg>
                            > >
                            > > please let me know if this helps...
                            >
                            > It helped a lot, overall the width and height filter attribute..
                            now it
                            > looks great.
                            >
                            > Thanks again!
                          Your message has been successfully submitted and would be delivered to recipients shortly.