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

clippling replicate objects

Expand Messages
  • cremnosedum
    Hi, I m trying to use replicate to provide realistic shading in realistic pictures. Unfortunately, it s difficult to make replicate objects the required shape
    Message 1 of 3 , Jun 3, 2012
    • 0 Attachment
      Hi,

      I'm trying to use replicate to provide realistic shading in realistic pictures. Unfortunately, it's difficult to make replicate objects the required shape (or is there a WYSIWYG replicate drawing program I don't know about?) so the obvious solution is to use clip paths.

      <?xml version="1.0" encoding="UTF-8" standalone="no"?>
      <!-- Created with Inkscape (http://www.inkscape.org/) -->
      <svg xmlns="http://www.w3.org/2000/svg" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink" onload="startup(evt)" viewBox="0 0 100 100">
      <defs>
      <clipPath id="myclip">
      <path
      d="m 39.405204,36.05948 c 0,0 -4.089219,1.486989 -9.479554,14.498141 -5.390334,13.011153 -2.416356,21.375465 -2.416356,21.375465 0,0 7.78742,6.294142 22.862453,5.762082 15.799256,-0.557621 22.118959,-5.390335 22.118959,-5.390335 0,0 0.225529,-13.793758 -4.64684,-22.862454 -5.407224,-10.064196 -10.780669,-13.3829 -10.780669,-13.3829 z"
      id="path2985"/>
      </clipPath>
      <script type="text/javascript" xlink:href="replicate.js"/>
      <linearGradient id="f" x1="1" y1="0.45" x2="0.15" y2="0.9">
      <stop offset="0" stop-color="#ff8"/>
      <stop offset=".3" stop-color="#000"/>
      <stop offset="1" stop-color="#ff8"/>
      </linearGradient>
      </defs>
      <g clip-path="url(#myclip)">
      <ellipse cy="-100" cx="200" rx="30" ry="50" fill="url(#f)" stroke-width=".5" stroke="none" transform="matrix(0.3,0,0,0.3,-10,-20)">
      <replicate repeatCount="80">
      <replicateAttribute attributeName="cy" from="300" to="100"/>
      <replicateAttribute attributeName="ry" from="100" to="0"/>
      <replicateAttribute attributeName="rx" from="100" to="0"/>
      </replicate>
      </ellipse>
      </g>
      <path
      style="color:#000000;fill:#7778dd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
      id="path2987"
      d="m 57.434945,36.431229 a 8.9219332,1.4869889 0 1 1 -17.843866,0 8.9219332,1.4869889 0 1 1 17.843866,0 z"/>
      </g>
      </svg>

      Well that should do it but the clipping isn't applied. I tryed applying the clip path directly to the ellipse but then only the path (which is also an ellipse) appeared.

      Perhaps I should put the replicate object in a pattern? Before wasting a lot of time trying things that don't work, I thought I'd ask if anybody else knows how to do this.

      For that matter, why does the replicate object appear over things that are later in the file?

      Richard Pearman http://www.pixelpalaces.com/
      The next stage in the evolution of web comics: http://www.onlinecomics.net/pages/details/listing.php?comicID=4415
      Read my Helium articles: http://www.helium.com/users/212199
      South Alberta Cactus and succulent society: http://www.facebook.com/group.php?gid=20360241008
    • David Dailey
      Hi Richard, I think the situation you mention is one of the shortcomings of replicate at the moment: how to confine its shading and rich gradient possibilities
      Message 2 of 3 , Jun 3, 2012
      • 0 Attachment
        Hi Richard,



        I think the situation you mention is one of the shortcomings of replicate at
        the moment: how to confine its shading and rich gradient possibilities to a
        given shape?



        Here are some experiments: http://cs.sru.edu/~ddailey/svg/gradRep1.svg



        If <replicate> were a full-fledged member of SVG, then applying a clip path
        to a replicated object should be straightforward; as it is, the way the
        JavaScript is written, we've appended all the replicates to the DOM in such
        a way that clipping would not seem to work.



        Eric Elder and I are in the midst of reworking some of the replicate code
        this summer (in hopes of making it handle animation for browsers like IE
        and webkit that are rather limited there and for handling "declarative
        randomness") so it seems like a time to consider such things as coexistence
        with clipping and masks and so forth. Maybe in six months or so we can
        report a better version which might meet your needs better.



        In short, <replicate> is only a sketchy proposal at present, able to handle
        pseudo-3D objects, rich gradients, non affine transforms, non-rectangular
        tilings and a few of the other shortcomings of SVG1.1. The folks designing
        SVG2.0 seem to prefer a handful of assorted other approaches to these
        issues, rather than using a single construct, but we suspect that once
        declarative randomness is added into the arsenal, the value of <replicate>
        will become apparent to a broader audience.



        Regards

        David



        From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com]
        On Behalf Of cremnosedum
        Sent: Sunday, June 03, 2012 1:25 PM
        To: svg-developers@yahoogroups.com
        Subject: [svg-developers] clippling replicate objects





        Hi,

        I'm trying to use replicate to provide realistic shading in realistic
        pictures. Unfortunately, it's difficult to make replicate objects the
        required shape (or is there a WYSIWYG replicate drawing program I don't know
        about?) so the obvious solution is to use clip paths.

        <?xml version="1.0" encoding="UTF-8" standalone="no"?>
        <!-- Created with Inkscape (http://www.inkscape.org/) -->
        <svg xmlns="http://www.w3.org/2000/svg" width="100%"
        xmlns:xlink="http://www.w3.org/1999/xlink" onload="startup(evt)" viewBox="0
        0 100 100">
        <defs>
        <clipPath id="myclip">
        <path
        d="m 39.405204,36.05948 c 0,0 -4.089219,1.486989 -9.479554,14.498141
        -5.390334,13.011153 -2.416356,21.375465 -2.416356,21.375465 0,0
        7.78742,6.294142 22.862453,5.762082 15.799256,-0.557621 22.118959,-5.390335
        22.118959,-5.390335 0,0 0.225529,-13.793758 -4.64684,-22.862454
        -5.407224,-10.064196 -10.780669,-13.3829 -10.780669,-13.3829 z"
        id="path2985"/>
        </clipPath>
        <script type="text/javascript" xlink:href="replicate.js"/>
        <linearGradient id="f" x1="1" y1="0.45" x2="0.15" y2="0.9">
        <stop offset="0" stop-color="#ff8"/>
        <stop offset=".3" stop-color="#000"/>
        <stop offset="1" stop-color="#ff8"/>
        </linearGradient>
        </defs>
        <g clip-path="url(#myclip)">
        <ellipse cy="-100" cx="200" rx="30" ry="50" fill="url(#f)" stroke-width=".5"
        stroke="none" transform="matrix(0.3,0,0,0.3,-10,-20)">
        <replicate repeatCount="80">
        <replicateAttribute attributeName="cy" from="300" to="100"/>
        <replicateAttribute attributeName="ry" from="100" to="0"/>
        <replicateAttribute attributeName="rx" from="100" to="0"/>
        </replicate>
        </ellipse>
        </g>
        <path
        style="color:#000000;fill:#7778dd;fill-opacity:1;fill-rule:nonzero;stroke:#0
        00000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterl
        imit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:non
        e;visibility:visible;display:inline;overflow:visible;enable-background:accum
        ulate"
        id="path2987"
        d="m 57.434945,36.431229 a 8.9219332,1.4869889 0 1 1 -17.843866,0
        8.9219332,1.4869889 0 1 1 17.843866,0 z"/>
        </g>
        </svg>

        Well that should do it but the clipping isn't applied. I tryed applying the
        clip path directly to the ellipse but then only the path (which is also an
        ellipse) appeared.

        Perhaps I should put the replicate object in a pattern? Before wasting a lot
        of time trying things that don't work, I thought I'd ask if anybody else
        knows how to do this.

        For that matter, why does the replicate object appear over things that are
        later in the file?

        Richard Pearman http://www.pixelpalaces.com/
        The next stage in the evolution of web comics:
        http://www.onlinecomics.net/pages/details/listing.php?comicID=4415
        Read my Helium articles: http://www.helium.com/users/212199
        South Alberta Cactus and succulent society:
        http://www.facebook.com/group.php?gid=20360241008





        [Non-text portions of this message have been removed]
      • Eric Elder
        Hello Richard, As David Dailey mentions, the replicate script is a work in progress as well as an opportunity for us to work out the details of our proposal.
        Message 3 of 3 , Jun 3, 2012
        • 0 Attachment
          Hello Richard,

          As David Dailey mentions, the replicate script is a work in progress as
          well as an opportunity for us to work out the details of our proposal. We
          really appreciate you interest in the project and welcome your thoughts.

          I checked out the SVG sample in your e-mail and it renders as I would
          expect it to (I've checked using the latest version of chrome). There is an
          error in your xml, you've got an extra </g> in there. I'm attaching a
          screen shot for you to review. The clipping is applied to the group
          containing the replicated ellipse. The elements added to the document by
          the replicate script appear sequentially on top of one another beginning as
          the next sibling of the element being replicated. The path, in your sample,
          that appears after the replicated ellipse, is drawn on top of the other
          elements.

          Make sure you are using the latest script available at
          http://code.google.com/p/svg-replicate/source/browse/#svn%2Ftrunk , I will
          be updating the script regularly in the next couple of months. I suspect
          that you are using an earlier version in which the elements generated by
          the replicate script are appended to the end of the document. This
          would cause them to appear outside of the group with a clip-path specified
          and to draw over top of other elements.

          Cheers,
          Eric

          On Sun, Jun 3, 2012 at 2:14 PM, David Dailey <ddailey@...>wrote:

          > Hi Richard,****
          >
          > ** **
          >
          > I think the situation you mention is one of the shortcomings of replicate
          > at the moment: how to confine its shading and rich gradient possibilities
          > to a given shape?****
          >
          > ** **
          >
          > Here are some experiments: http://cs.sru.edu/~ddailey/svg/gradRep1.svg ***
          > *
          >
          > ** **
          >
          > If <replicate> were a full-fledged member of SVG, then applying a clip
          > path to a replicated object should be straightforward; as it is, the way
          > the JavaScript is written, we�ve appended all the replicates to the DOM in
          > such a way that clipping would not seem to work.****
          >
          > ** **
          >
          > Eric Elder and I are in the midst of reworking some of the replicate code
          > this summer (in hopes of making it handle animation for browsers like IE
          > and webkit that are rather limited there and for handling �declarative
          > randomness�) so it seems like a time to consider such things as coexistence
          > with clipping and masks and so forth. Maybe in six months or so we can
          > report a better version which might meet your needs better.****
          >
          > ** **
          >
          > In short, <replicate> is only a sketchy proposal at present, able to
          > handle pseudo-3D objects, rich gradients, non affine transforms,
          > non-rectangular tilings and a few of the other shortcomings of SVG1.1. The
          > folks designing SVG2.0 seem to prefer a handful of assorted other
          > approaches to these issues, rather than using a single construct, but we
          > suspect that once declarative randomness is added into the arsenal, the
          > value of <replicate> will become apparent to a broader audience.****
          >
          > ** **
          >
          > Regards****
          >
          > David****
          >
          > ** **
          >
          > *From:* svg-developers@yahoogroups.com [mailto:
          > svg-developers@yahoogroups.com] *On Behalf Of *cremnosedum
          > *Sent:* Sunday, June 03, 2012 1:25 PM
          > *To:* svg-developers@yahoogroups.com
          > *Subject:* [svg-developers] clippling replicate objects****
          >
          > ** **
          >
          > ****
          >
          > Hi,
          >
          > I'm trying to use replicate to provide realistic shading in realistic
          > pictures. Unfortunately, it's difficult to make replicate objects the
          > required shape (or is there a WYSIWYG replicate drawing program I don't
          > know about?) so the obvious solution is to use clip paths.
          >
          > <?xml version="1.0" encoding="UTF-8" standalone="no"?>
          > <!-- Created with Inkscape (http://www.inkscape.org/) -->
          > <svg xmlns="http://www.w3.org/2000/svg" width="100%" xmlns:xlink="
          > http://www.w3.org/1999/xlink" onload="startup(evt)" viewBox="0 0 100 100">
          > <defs>
          > <clipPath id="myclip">
          > <path
          > d="m 39.405204,36.05948 c 0,0 -4.089219,1.486989 -9.479554,14.498141
          > -5.390334,13.011153 -2.416356,21.375465 -2.416356,21.375465 0,0
          > 7.78742,6.294142 22.862453,5.762082 15.799256,-0.557621 22.118959,-5.390335
          > 22.118959,-5.390335 0,0 0.225529,-13.793758 -4.64684,-22.862454
          > -5.407224,-10.064196 -10.780669,-13.3829 -10.780669,-13.3829 z"
          > id="path2985"/>
          > </clipPath>
          > <script type="text/javascript" xlink:href="replicate.js"/>
          > <linearGradient id="f" x1="1" y1="0.45" x2="0.15" y2="0.9">
          > <stop offset="0" stop-color="#ff8"/>
          > <stop offset=".3" stop-color="#000"/>
          > <stop offset="1" stop-color="#ff8"/>
          > </linearGradient>
          > </defs>
          > <g clip-path="url(#myclip)">
          > <ellipse cy="-100" cx="200" rx="30" ry="50" fill="url(#f)"
          > stroke-width=".5" stroke="none" transform="matrix(0.3,0,0,0.3,-10,-20)">
          > <replicate repeatCount="80">
          > <replicateAttribute attributeName="cy" from="300" to="100"/>
          > <replicateAttribute attributeName="ry" from="100" to="0"/>
          > <replicateAttribute attributeName="rx" from="100" to="0"/>
          > </replicate>
          > </ellipse>
          > </g>
          > <path
          >
          > style="color:#000000;fill:#7778dd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
          > id="path2987"
          > d="m 57.434945,36.431229 a 8.9219332,1.4869889 0 1 1 -17.843866,0
          > 8.9219332,1.4869889 0 1 1 17.843866,0 z"/>
          > </g>
          > </svg>
          >
          > Well that should do it but the clipping isn't applied. I tryed applying
          > the clip path directly to the ellipse but then only the path (which is also
          > an ellipse) appeared.
          >
          > Perhaps I should put the replicate object in a pattern? Before wasting a
          > lot of time trying things that don't work, I thought I'd ask if anybody
          > else knows how to do this.
          >
          > For that matter, why does the replicate object appear over things that are
          > later in the file?
          >
          > Richard Pearman http://www.pixelpalaces.com/
          > The next stage in the evolution of web comics:
          > http://www.onlinecomics.net/pages/details/listing.php?comicID=4415
          > Read my Helium articles: http://www.helium.com/users/212199
          > South Alberta Cactus and succulent society:
          > http://www.facebook.com/group.php?gid=20360241008****
          >
          > ****
          >


          [Non-text portions of this message have been removed]
        Your message has been successfully submitted and would be delivered to recipients shortly.