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

Filter transformations

Expand Messages
  • honyk
    Dear All, I d like to transform (rotate) my object with the filter applied to it, but I want to keep my filter without object s transformation. I ended up with
    Message 1 of 4 , Jun 1, 2012
    • 0 Attachment
      Dear All,

      I'd like to transform (rotate) my object with the filter applied to it, but
      I want to keep my filter without object's transformation. I ended up with
      this code. In sum, there are three rotations (back and forward) to get the
      desired effect:
      http://bilyujezd.cz/other/fePointLight.svg (works in Firefox only)

      Is there a more efficient way?
      Is there any workaround to render this effect (sphere-like object) also in
      Chrome or Opera?

      Regards,
      Jan
    • Jason Barnabas
      ... I don t use Opera, but this one works in Chrome.
      Message 2 of 4 , Jun 1, 2012
      • 0 Attachment
        honyk <j.tosovsky@...> wrote:
        > I'd like to transform (rotate) my object with the filter
        > applied to it, but I want to keep my filter without object's
        > transformation. I ended up with this code. In sum, there are
        > three rotations (back and forward) to get the desired effect:
        > http://bilyujezd.cz/other/fePointLight.svg (works in Firefox only)
        >
        > Is there a more efficient way?
        > Is there any workaround to render this effect (sphere-like
        > object) also in Chrome or Opera?
        >
        > Regards,
        > Jan


        I don't use Opera, but this one works in Chrome.

        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
        <radialGradient id="grad1" cx="50%" cy="50%" r="50%"
        fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:rgb(255,255,255);
        stop-opacity:0" />
        <stop offset="100%" style="stop-color:rgb(80,80,80);
        stop-opacity:1" />
        </radialGradient>
        </defs>
        <line x1=115 y1=100 x2=285 y2=100 stroke=red stroke-width=2 />
        <circle cx="200" cy="100" r="85" fill="url(#grad1)" opacity=0.5 />
        </svg>

        I've learned more about SVG (and JavaScript for that matter) from
        http://www.w3schools.com
        than anywhere else.
      • honyk
        Hi Jason, ... RadialGradient is indeed much better approach in this case, thanks for the tip. It is much more compatible than my filter. Anyway, has anybody an
        Message 3 of 4 , Jun 4, 2012
        • 0 Attachment
          Hi Jason,

          >> http://bilyujezd.cz/other/fePointLight.svg (works in Firefox only)
          >> Is there a more efficient way?

          > I don't use Opera, but this one works in Chrome.
          > ... radialGradient ....

          RadialGradient is indeed much better approach in this case, thanks for the
          tip. It is much more compatible than my filter.

          Anyway, has anybody an idea how my filter should look like? I've noticed it
          is rendered with that grey background even in Inkscape and Opera. In 100%
          zoom it has different appearance in every browser (Chrome/FF/Opera). It
          behaves strangely when zoomed in/out (except Opera). What is the gauge? The
          only reference I found is this test, but it doesn't show exactly what I
          need:
          http://www.w3.org/Graphics/SVG/Test/20110816/harness/htmlObjectApproved/filt
          ers-light-01-f.html

          Regards,
          Jan
        • Jason Barnabas
          ... I got a 404 on that. If a link is enclosed like a tag
          Message 4 of 4 , Jun 5, 2012
          • 0 Attachment
            honyk <j.tosovsky@...> wrote:


            > Hi Jason,
            >
            > >> http://bilyujezd.cz/other/fePointLight.svg (works in Firefox only)
            > >> Is there a more efficient way?
            >
            > > I don't use Opera, but this one works in Chrome.
            > > ... radialGradient ....
            >
            > RadialGradient is indeed much better approach in this case,
            > thanks for the tip. It is much more compatible than my
            > filter.
            >
            > Anyway, has anybody an idea how my filter should look like?
            > I've noticed it is rendered with that grey background even
            > in Inkscape and Opera. In 100% zoom it has different
            > appearance in every browser (Chrome/FF/Opera). It behaves
            > strangely when zoomed in/out (except Opera). What is the
            > gauge? The only reference I found is this test, but it
            > doesn't show exactly what I need:
            <http://www.w3.org/Graphics/SVG/Test/20110816/harness/htmlObjectApproved/filters-light-01-f.html>



            I got a 404 on that. If a link is enclosed like a tag <tag>
            the mail handling software usually recognizes it as a link
            and won't break it.

            I can't find your original image. If you want to repost the
            link for it I'll look at it again in FireFox, assuming
            that's what you want it to look like. In the mean time you
            might try to Google "3d lighting effects SVG"
            ____________________________________________________________


            I must be travelling,
            Jason


            tc+ ?23 ?mgt mt tne ?t20 t4++ ?t5 ?tp tg+ ?th ?to
            ru- ge++ 3i c++ jt- au+ ls pi+ ta+ he+
            kk++ hi+ as+ va+ dr ?ith vr ne so+ zh vi da sy
          Your message has been successfully submitted and would be delivered to recipients shortly.