Web Analytics Made Easy -
StatCounter SVG Paths is clipping itself - CodingForum

Announcement

Collapse
No announcement yet.

SVG Paths is clipping itself

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Labrar
    replied
    Thank you to both of you. I'll give it a try.

    Leave a comment:


  • deathshadow
    replied
    You want combine, not unite. I'm not familiar with Affinity, but you should try and recreate it in "Boxy SVG" as it will likely be able to do what you're trying to do.

    I usually dislike web crapplets, but Boxy does what it should.
    https://boxy-svg.com/

    Also you're basically working with ellipses, so why are they broken into separate paths?

    Leave a comment:


  • VIPStephan
    replied
    OK, I had a look at it in Affinity Designer (graphical vector editor) and apparently there is no way to combine two intersecting closed shapes into a compound shape without cutting a hole into it. And it kind of makes sense because it becomes a single path that negates itself where it overlaps. The alternative with the current shapes would be to apply the “union” operation on the paths but that would remove the intersecting part and merge the paths together into one (so that would remove the border on the intersecting part).

    The only way to achieve what you want would be a single continuous path rather than a compound path of closed shapes. I. e. you just create the illusion of intersecting ellipses; see the attached demonstration:
    Click image for larger version  Name:	think_example.png Views:	0 Size:	9.5 KB ID:	2424590
    The point at the top would be the start, then it goes on to the left, and instead of following the ellipse shape, it makes a sharp right turn to follow the other ellipse shape, goes all the way around, makes a sharp left turn at the end, crosses itself and then follows the first ellipse shape again up to the finish.

    You can then set the fill mode to nonzero and it will fill everything.

    Leave a comment:


  • Labrar
    replied
    Yep. But that's exactly what im trying not to do. But if there is no other way then use an path element for each, i have to.

    Leave a comment:


  • VIPStephan
    replied
    I think it has something to do with the fill rule but I wasn’t able to change anything by changing the fill rule value; perhaps it would be better to separate the shapes into their own paths?

    https://developer.mozilla.org/en-US/...bute/fill-rule
    https://www.sitepoint.com/understand...rule-property/
    https://oreillymedia.github.io/Using...fill-rule.html

    Leave a comment:


  • Labrar
    started a topic SVG Paths is clipping itself

    SVG Paths is clipping itself

    Hi.
    The problem: https://www.metalrain.de/think.svg

    The SVG Code:
    PHP Code:
    <svg xmlns="http://www.w3.org/2000/svg" width="869" height="869">
    <
    g transform="scale (1.4483333333333333,1.4483333333333333)">
    <
    path fill="#cccccc" fill-rule="nonzero" stroke="#FF00FF" stroke-width="1"
    d="M242.11593785960878,210.58688147295746a5,3.3333333333333335 0 1,0 10,0a5,3.3333333333333335 0 1,0 -10,0z

    M187.14041514041514,229.80219780219778a33.321123321123316,22.21408221408221 0 1,0 66.64224664224663,0a33.321123321123316,22.21408221408221 0 1,0 -66.64224664224663,0z

    M180 314.86446886446885
    C180 314.86446886446885 180 229.80219780219778 220.46153846153845 229.80219780219778
    C220.46153846153845 229.80219780219778 260.9230769230769 229.80219780219778 260.9230769230769 314.86446886446885
    C260.9230769230769 314.86446886446885 260.9230769230769 399.9267399267399 220.46153846153845 399.9267399267399
    C220.46153846153845 399.9267399267399 180 399.9267399267399 180 314.86446886446885z"
    ></path></g>
    </
    svg
    SVG Path only:
    PHP Code:
    /*SMALL FIRST BUBBLE*/
    M242.11593785960878,210.58688147295746a5,3.3333333333333335 0 1,0 10,0a5,3.3333333333333335 0 1,-10,0z

    /*Medium SECCOND BUBBLE*/
    M187.14041514041514,229.80219780219778a33.321123321123316,22.21408221408221 0 1,0 66.64224664224663,0a33.321123321123316,22.21408221408221 0 1,-66.64224664224663,0z

    /*Big Third and last BUBBLE*/
    M180 314.86446886446885
    C180 314.86446886446885 180 229.80219780219778 220.46153846153845 229.80219780219778
    C220.46153846153845 229.80219780219778 260.9230769230769 229.80219780219778 260.9230769230769 314.86446886446885
    C260.9230769230769 314.86446886446885 260.9230769230769 399.9267399267399 220.46153846153845 399.9267399267399
    C220.46153846153845 399.9267399267399 180 399.9267399267399 180 314.86446886446885z 
    This should be a think bubble (like in comics), but the bubbles should be seperated and not clipping the other ones. First bubble underneath Bubble 2, Bubble 2 underneath Bubble 3 and so on. Instead seccond bubble clips the third bubble.
    Is there any solution without adding a path element for each bubble but use the path in one path element as i did? What am i missing?
    Last edited by Labrar; Jun 11, 2020, 06:05 AM.
Working...
X