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

Re: Drop Shadow filter is getting clipped

Expand Messages
  • Francis Hemsher
    I found the answer... I added negative x,y attribute values to the Filter to offset its reference space to pick up the negative space occupied by the element
    Message 1 of 2 , Apr 22, 2009
    • 0 Attachment
      I found the answer...

      I added negative x,y attribute values to the Filter to offset its reference
      space to pick up the negative space occupied by the element and its drop shadow.




      --- In svg-developers@yahoogroups.com, "Francis Hemsher" <fhemsher@...> wrote:
      >
      > I have a drop shadow def that I copied from somewhere..it's nice(thank you creator)
      >
      > I include the filter on an element. Then I rebuild the element around the origin so it is centered at (0,0)
      >
      > When I do that, the element and its shadow are clipped at values below 0 for x,y.
      >
      > Below is the function that builds the defs. Any ideas on what attributes I could change or add to prevent the clipping?
      >
      > Thanks
      > Francis
      >
      > function createShadow()
      > {
      > var defs=docSVG.createElement("defs")
      > defs.setAttribute("id","shadowDefs")
      > Filter=docSVG.createElement("filter")
      > var feGaussianBlur=docSVG.createElement("feGaussianBlur")
      > var feOffset=docSVG.createElement("feOffset")
      > var feBlend=docSVG.createElement("feBlend")
      >
      > Filter.setAttribute("id","dropShadow")
      > Filter.setAttribute("filterUnits","userSpaceOnUse")
      > Filter.setAttribute("width","3000")
      > Filter.setAttribute("height","3000")
      >
      >
      > feGaussianBlur.setAttribute("in","SourceAlpha")
      > feGaussianBlur.setAttribute("result","blur-out")
      > feGaussianBlur.setAttribute("stdDeviation","4")
      >
      > feOffset.setAttribute("in","blur-out")
      > feOffset.setAttribute("result","the-shadow")
      > feOffset.setAttribute("dx","4")
      > feOffset.setAttribute("dy","4")
      >
      > feBlend.setAttribute("in","SourceGraphic")
      > feBlend.setAttribute("in2","the-shadow")
      > feBlend.setAttribute("mode","dropShadow")
      >
      > Filter.appendChild(feGaussianBlur)
      > Filter.appendChild(feOffset)
      > Filter.appendChild(feBlend)
      > defs.appendChild(Filter)
      > myLayer.appendChild(defs)
      > }
      >
      > }
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.