RE: defining a filter

Fri, 21 Jun 2002 13:34:53 -0700 

Hi, Mark-

You shouldn't have to reload the document. Inserting a <defs> onload works
fine:

<svg onload='MakeFilterDef(evt)'>
<script><![CDATA[
function MakeFilterDef(evt)
   {
   svgDoc = evt.target.ownerDocument;

   var newDefs = document.createElement('defs');
   newDefs.setAttributeNS(null, 'id', 'filterdefs');
   svgDoc.appendChild(newDefs);

   var cmatrix = document.createElement('feColorMatrix');
   cmatrix.setAttributeNS(null, 'type', 'matrix');
   cmatrix.setAttributeNS(null, 'values', '0 0 0 0 0 0 0 0 .9 0 0 0 0 .9 0 0
0 0 1 0');

   var merge = document.createElement('feMerge');
   var merge1 = document.createElement('feMergeNode');
   merge1.setAttributeNS(null, 'in', 'coloredBlur');
   var merge2 = document.createElement('feMergeNode');
   merge2.setAttributeNS(null, 'in', 'SourceGraphic');
   merge.appendChild(merge1);
   merge.appendChild(merge2);

   var gblur = document.createElement('feGaussianBlur');
   gblur.setAttributeNS(null, 'stdDeviation', '5');
   gblur.setAttributeNS(null, 'result', 'coloredBlur');

   var MyFilter = document.createElement('filter');
   MyFilter.setAttributeNS(null, 'id', 'glow');
   MyFilter.appendChild(cmatrix);
   MyFilter.appendChild(gblur);
   MyFilter.appendChild(merge);


   document.getElementById('filterdefs').appendChild(MyFilter);

   var targetObject = document.getElementById('targetCircle');
   targetObject.style.setProperty("filter", "url(#glow)")
   }

]]></script>

<circle id='targetCircle' cx='25' cy='25' r='20' style='fill:red; '/>

</svg>

Or am I missing the point?

HTH-
-Doug

> -----Original Message-----
> From: Mark Vidov [mailto:[EMAIL PROTECTED]]
> Sent: Friday, June 21, 2002 4:00 PM
> To: [EMAIL PROTECTED]
> Subject: RE: defining a filter
>
>
> Thanks Doug.
>
> I realized that my question wasn't too clear. Calling el.setAttribute and
> el.setAttributeNS both indeed work. However what I want to do is
> to create
> the defs section and define the filter after the document has
> already been
> loaded.
>
> I guess that I could just modify and set the document back into
> the canvas
> but that would result in the whole reloading sequence and the need to
> reapply transforms.
>
>
> From: "Doug Schepers" <[EMAIL PROTECTED]>
> Reply-To: "Batik Users" <[EMAIL PROTECTED]>
> To: "Batik Users" <[EMAIL PROTECTED]>
> Subject: RE: defining a filter
> Date: Fri, 21 Jun 2002 15:38:40 -0400
>
> Hi, Mark-
>
> I don't use Batik very often, so forgive me if I go astray. However, I
> believe that Batik want you to use "setAttributeNS" rather than
> "setAttribute." I think that
>
> el.setAttributeNS(null, "filter", "url(#myfilter)")
>
> would work... or perhaps
>
> el.style.setProperty("filter", "url(#myfilter)")
>
> is better.
>
> In any case, I have a simple drawing program that allows the user
> to create
> and apply filters, so dynamic use of filters is definitely possible.
>
> BTW, since a filter is not rendered on its own, you don't necessarily have
> to put it into <defs>, though I always do. However, make sure you are
> inserting it into the SVG, and not just the document. Something like:
>
> <defs id='filterdefs'></defs>
> [...]
> var MyFilter = document.createElement('filter');
> ...
> document.getElementById('filterdefs').appendChild(MyFilter);
>
> should do the trick.
>
> HTH-
> -Doug
>
>  > -----Original Message-----
>  > From: Mark Vidov [mailto:[EMAIL PROTECTED]]
>  > Sent: Friday, June 21, 2002 2:17 PM
>  > To: [EMAIL PROTECTED]
>  > Subject: defining a filter
>  >
>  >
>  > I'm probably missing an easy way to do this but I would like
> to add a new
>  > filter to an existing svg document so it can be used to
>  > dynamically change
>  > elements.
>  >
>  > I attempted to add the filter to the <defs> but doing so in response to
>  > documentLoadingComplete seems to be too late. Is there another
> way to do
>  > this? Should I be hooking into the building of the DOM tree at
>  > some point?
>  > Or is there a programmatic way to modify the defs or define the filter?
>  > Thanks for any advice.
>  >
>  >
>  > eg
>  > insert this into <defs>:
>  >   <filter id="myfilter" .../>
>  > modify an element in code:
>  >   el.setAttribute("filter", "url(#myfilter)")
>
> ---
> Outgoing mail is certified Virus Free.
> Checked by AVG anti-virus system (http://www.grisoft.com).
> Version: 6.0.371 / Virus Database: 206 - Release Date: 6/13/2002
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [EMAIL PROTECTED]
> For additional commands, e-mail: [EMAIL PROTECTED]
>
>
>
>
> _________________________________________________________________
> Chat with friends online, try MSN Messenger: http://messenger.msn.com
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [EMAIL PROTECTED]
> For additional commands, e-mail: [EMAIL PROTECTED]
>
>
> ---
> Incoming mail is certified Virus Free.
> Checked by AVG anti-virus system (http://www.grisoft.com).
> Version: 6.0.371 / Virus Database: 206 - Release Date: 6/13/2002
>
---
Outgoing mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.371 / Virus Database: 206 - Release Date: 6/13/2002


---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]

Reply via email to