Related
This:
<svg width=100 height=100>
<g transform="translate(0.5, 0.5)" stroke=red fill=none>
<line x1=10 y1=10 x2=10 y2=50 />
<path d="M20,10 H20 V50 H20 Z" />
<path d="M30,10 H31 V50 H30 Z" />
<path d="M40,10 H42 V50 H40 Z" />
<path d="M50,10 H52 V50 H50 Z" />
</g>
</svg>
produces image like this in Chrome (zoomed in so it's obvious):
Top part
Bottom part
Note that the edges of the lines and the corners of the rectangles are of a slightly lighter red.
This looks like it's anti-aliasing, but trying shape-rendering="crispEdges" suggestion in this answer did not fully work. The problem is that it then cuts the line by 1px instead:
<svg width=100 height=100>
<g shape-rendering="crispEdges" stroke=red fill=none>
<line x1=10 y1=10 x2=10 y2=50 />
<path d="M20,10 H20 V50 H20 Z" />
<path d="M30,10 H31 V50 H30 Z" />
<path d="M40,10 H42 V50 H40 Z" />
<path d="M50,10 H52 V50 H50 Z" />
</g>
</svg>
Top part
Bottom part
Is there a way to fix this somehow, so I get the same line color across the specified coordinate range?
On Win64 Chrome, I'm only seeing the antialiasing on the first two elements.
The explanation for the line element is simple. Because you are translating down by half a pixel, the two line ends are ending halfway up/down a pixel. Hence you will get antialiasing in that case. Adjust the coords, or add stroke-linecap="square" to fix that.
Illustration:
<svg viewBox="0 0 70 40" width="420">
<g transform="translate(10,10)">
<g fill="none" stroke="#ccc" id="grid">
<rect width="10" height="10"/>
<rect x="10" width="10" height="10"/>
<rect y="10" width="10" height="10"/>
<rect x="10" y="10" width="10" height="10"/>
</g>
<!-- line (as is) -->
<line x1="5" y1="20" x2="5" y2="5" stroke="#00c8" stroke-width="10"/>
<line x1="5" y1="20" x2="5" y2="5" stroke="red" stroke-width="1"/>
</g>
<g transform="translate(40,10)">
<use xlink:href="#grid"/>
<!-- rectamngle corner -->
<path d="M 5,20 L 5,5 L 20,5" fill="none" stroke="#00c8" stroke-width="10"/>
<path d="M 5,20 L 5,5 L 20,5" fill="none" stroke="red" stroke-width="1"/>
</g>
</svg>
As for the zero width rectangle. Not sure what's happening there. It is only slightly lighter. It is likely a rendering bug in Skia. It may only effect the GPU renderer of Skia (I didn't check). The GPU renderer has a few more rendering bugs on these sort of edge cases than the CPU rendering path. If you care, you could file a bug about it.
<svg width=100 height=100>
<g transform="translate(0.5, 0.5)" stroke=red fill=none>
<line x1=10 y1=10 x2=10 y2=50 stroke-linecap="square"/>
<path d="M20,10 H20 V50 H20 Z" />
</g>
</svg>
I've a strange effect with SVGs and have no idea how to handle it.
The SVGs are rendered on Shopify product pages based on metafield values. E.g. when a product has a TRUE in the metafield for vegan, then the SVG for vegan is displayed. I've about 10 metafields for breathable, high-density, repellent, windbreaker etc.
Shopify's metafields are kind of hidden properties and their values can be accessed through Shopify Liquid templating language. On a product page I check e.g. if metafields.product-icons.vegan is TRUE. If yes, the SVG is rendered (the icons in the bottom right).
The product page above is an example which produces a correct result. Every icon is displayed fully.
My problem is that on some product pages the icons are rendered correctly and on some parts of the SVGs are missing. On the image below. look at the right vegan icon, where the top part is missing:
In this example other parts of the high-density icon in the middle are missing than in the one above, whereas on the first image the icon is complete.
I checked different machines and networks to see if it's a caching issue. But it isn't.
Every product uses the same template, hence the same liquid code and SVGs.
Any idea what I check further?
Here an example for an SVG which was rendered properly and and with missing parts on two different pages
<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 76.5 76.5" xml:space="preserve">
<style type="text/css">
.st0{display:none;}
.st1{fill:none;stroke:#000000;stroke-width:2;}
.st2{fill:#FFFFFF;}
.st3{fill:none;stroke:#FFFFFF;stroke-width:5;}
.st4{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.st5{display:inline;}
.st6{font-family:'Akkurat-Bold';}
.st7{font-size:7.0024px;}
.st8{display:inline;fill:#2B3427;}
.st9{fill:none;stroke:#2B3427;stroke-width:2;}
.st10{fill:none;stroke:#2B3427;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.st11{display:inline;fill:#FFFFFF;}
.st12{fill:#2B3427;}
</style>
<g id="Vorlagen" class="st0">
</g>
<g id="Kreis_Black">
<path d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
<path d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
</g>
<g id="Illu">
<g>
<path class="st1" d="M35.2,43.3c-1.5,1-9.1,3.6-14.7-1.1c-4-3.3-4.4-8.7-3.6-24.9c9.5-0.9,17.4,0.9,22,5c4.1,3.6,3.9,8.6,4.3,11.2
C43.6,36.5,39.5,40.4,35.2,43.3z"/>
<path class="st2" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st3" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st2" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st1" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st4" d="M22.7,22.6c0,0,14.8,6,11.3,43.2c0,0,12.4-31.6,24-36.1"/>
</g>
<rect x="21.1" y="47.3" class="st2" width="32.6" height="8.1"/>
</g>
<g id="Typo" class="st0">
<text transform="matrix(1 0 0 1 25.4238 53.8332)" class="st5 st6 st7">VEGAN</text>
</g>
<g id="Typo_Gepfadet">
<g>
<path d="M28.1,53.8h-1l-1.6-5h1l1.2,3.8l1.2-3.8h0.9L28.1,53.8z"/>
<path d="M30.8,53.8v-5h3.5v0.8h-2.6v1.2H34v0.8h-2.3V53h2.6v0.8H30.8z"/>
<path d="M38.9,53.8l-0.1-0.5c-0.1,0.3-0.6,0.6-1.2,0.6c-0.6,0-1.1-0.1-1.5-0.6c-0.5-0.5-0.6-1.2-0.6-2s0.1-1.5,0.6-2
c0.4-0.4,0.9-0.6,1.5-0.6c0.6,0,1.1,0.2,1.5,0.6c0.2,0.3,0.4,0.6,0.5,1h-0.9c0-0.2-0.1-0.3-0.2-0.5c-0.2-0.2-0.4-0.3-0.8-0.3
c-0.3,0-0.6,0.1-0.8,0.3c-0.3,0.4-0.4,1-0.4,1.4s0,1.1,0.4,1.5c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.7-0.3
c0.3-0.3,0.3-0.6,0.3-1h-1.2v-0.8h2.1v2.7H38.9z"/>
<path d="M44,53.8l-0.3-1h-2l-0.3,1h-0.9l1.7-5h1l1.7,5H44z M42.7,50L42,52.1h1.4L42.7,50z"/>
<path d="M49.1,53.8l-2.2-3.4v3.4H46v-5h1l2.1,3.4v-3.4H50v5H49.1z"/>
</g>
</g>
<g id="Ikons_x5F_Grün" class="st0">
<path class="st8" d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
<path class="st8" d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
<g class="st5">
<path class="st9" d="M35.2,43.3c-1.5,1-9.1,3.6-14.7-1.1c-4-3.3-4.4-8.7-3.6-24.9c9.5-0.9,17.4,0.9,22,5c4.1,3.6,3.9,8.6,4.3,11.2
C43.6,36.5,39.5,40.4,35.2,43.3z"/>
<path class="st2" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st3" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st2" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st9" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st10" d="M22.7,22.6c0,0,14.8,6,11.3,43.2c0,0,12.4-31.6,24-36.1"/>
</g>
<rect x="21.1" y="47.3" class="st11" width="32.6" height="8.1"/>
<g class="st5">
<path class="st12" d="M28.1,53.8h-1l-1.6-5h1l1.2,3.8l1.2-3.8h0.9L28.1,53.8z"/>
<path class="st12" d="M30.8,53.8v-5h3.5v0.8h-2.6v1.2H34v0.8h-2.3V53h2.6v0.8H30.8z"/>
<path class="st12" d="M38.9,53.8l-0.1-0.5c-0.1,0.3-0.6,0.6-1.2,0.6c-0.6,0-1.1-0.1-1.5-0.6c-0.5-0.5-0.6-1.2-0.6-2s0.1-1.5,0.6-2
c0.4-0.4,0.9-0.6,1.5-0.6c0.6,0,1.1,0.2,1.5,0.6c0.2,0.3,0.4,0.6,0.5,1h-0.9c0-0.2-0.1-0.3-0.2-0.5c-0.2-0.2-0.4-0.3-0.8-0.3
c-0.3,0-0.6,0.1-0.8,0.3c-0.3,0.4-0.4,1-0.4,1.4s0,1.1,0.4,1.5c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.7-0.3
c0.3-0.3,0.3-0.6,0.3-1h-1.2v-0.8h2.1v2.7H38.9z"/>
<path class="st12" d="M44,53.8l-0.3-1h-2l-0.3,1h-0.9l1.7-5h1l1.7,5H44z M42.7,50L42,52.1h1.4L42.7,50z"/>
<path class="st12" d="M49.1,53.8l-2.2-3.4v3.4H46v-5h1l2.1,3.4v-3.4H50v5H49.1z"/>
</g>
</g>
</svg>
I have the Main.svg and the Template.svg files.
I want to programmatically insert Template.svg into Main.svg.
For this:
In Inskape I place the Template in a specific place and remember the coordinates
In Template.svg - set the specified coordinates
After the programmatically insertion, I get the Template offset from the position at which it should be located (-25.1632)
What could be the problem? The coordinates of the template inserted into Inskape and the coordinates of the template inserted programmatically match. Where is my mistake?
In Inskape:
Main.svg
<svg width="210mm" height="148mm" version="1.1" viewBox="0 0 210 148" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="#000">
<path d="m4.3752 45.005h197.92" stroke-width="2.0845"/>
<path d="m43.631 44.417 5.63e-4 -1.1146 0.0074-11.603" stroke-width=".81503"/>
<path d="m59.98 67.884 5.6e-4 -1.9765 7e-3 -20.575" stroke-width="1.0815"/>
<path d="m10.497 107.41h88.438" stroke-width="1.3934"/>
<path d="m58.872 107.49 2e-3 -0.59044 0.024-6.1464" stroke-width="1.0653"/>
<path d="m90.583 113.94 2e-3 -0.59044 0.024-6.1464" stroke-width="1.0653"/>
</g>
<g fill="none" stroke="#000">
<path d="m137.75 107.95 2e-3 -0.59045 0.024-6.1464" stroke-width="1.0653"/>
<path d="m169.46 114.4 2e-3 -0.59044 0.024-6.1464" stroke-width="1.0653"/>
<path d="m127.41 107.5h63.336" stroke-width="1.1792"/>
<path d="m137.77 67.877 5.6e-4 -1.9765 7e-3 -20.575" stroke-width="1.0815"/>
<path d="m101.25 44.632 5.7e-4 -1.1146 7e-3 -11.603" stroke-width=".81503"/>
<path d="m178.71 43.825 5.7e-4 -1.1146 7e-3 -11.603" stroke-width=".81503"/>
</g>
<!--<g> Place for the Template group </g>-->
</svg>
In Template change translate(-10.664053 22.731272) on translate(65.438 9.0453)
Template.svg
<g transform="translate(-10.664053 22.731272)">
<rect x="33.101" y="10.801" width="5.4464" height="7.1" fill="#fff"/>
<g fill="none" stroke="#102027" stroke-linecap="round">
<path d="m38.32 14.248h-5" stroke-width=".44444"/>
<g stroke-width=".4">
<path d="m35.82 5.6385v5" opacity=".98"/>
<path d="m35.82 17.869v5"/>
<path d="m37.07 10.74h-2.5"/>
<path d="m37.07 17.818h-2.5"/>
</g>
</g>
</g>
In Browser:
In the browser I see following code. If the translates (translate(65.438 9.0453)) are equal, why are the two elements not the same?
<svg>
...
<!--Inskape-->
<g transform="translate(65.438 9.0453)">
<rect x="33.101" y="10.801" width="5.4464" height="7.1" fill="#fff"/>
<g fill="none" stroke="#102027" stroke-linecap="round">
<path d="m38.32 14.248h-5" stroke-width=".44444"/>
<g stroke-width=".4">
<path d="m35.82 5.6385v5" opacity=".98"/>
<path d="m35.82 17.869v5"/>
<path d="m37.07 10.74h-2.5"/>
<path d="m37.07 17.818h-2.5"/>
</g>
</g>
</g>
<!--programmatically insert-->
<g transform="translate(65.438 9.0453)">
<rect x="7.9378" y="10.801" width="5.4464" height="7.1" fill="#fff"/>
<g fill="none" stroke="#102027" stroke-linecap="round">
<path d="m13.156 14.248h-5 " stroke-width=".4"/>
<g stroke-width=".4">
<path d="m10.656 5.6385v5" opacity=".98"/>
<path d="m10.656 17.869v5"/>
<path d="m11.906 10.74h-2.5"/>
<path d="m11.906 17.818h-2.5"/>
</g>
<title></title>
</g>
</g>
</svg>
I realized that there was no offset, it was necessary to place all the elements on one canvas. When copying elements from other canvases - there will be an offset.
Thanks Robert Longson for the tip.
I would like to replace the green shape in the middle with a background image (only in the white area).
Image with a green shape
For that image I would like to be able to set the CSS properties (or SVG equivalents) such as background-position: xx% xx% and transform: scale(xx). These to be able to change the image position in any direction, and to be able to zoom it in or out.
I have tried this with a path pattern, but it's not proportional and neither good looking:
See what I tried
I would like to keep the blue border and only put the image inside the white circle, in the very middle of it.
Part of the confusion may be that you have put your image inside of <g> groups which have transforms on them. If you move the image outside of those <g> elements, coordinates are much easier to deal with.
Now, there are (at least) two ways to cut your image into a circle and place it where you want:
Use a path with a <pattern>/<image> fill (much like in your example).
Use an <image> element with a clip-path.
See the comments about these alternatives near the end of this SVG:
<svg viewBox="0 0 170.08 170.08" width="170.08" height="170.08" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="matrix(1.333333, 0, 0, -1.333333, 0, 170.080002)" id="g10">
<g transform="scale(0.1)" id="g12">
<path id="path14" style="fill:#fffd51;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 1275.59,0 H 0 V 1275.59 H 1275.59 V 0"></path>
<path id="path16" style="fill:#deddde;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 637.797,70.8711 c -313.109,0 -566.9337,253.8169 -566.9337,566.9219 0,313.109 253.8247,566.937 566.9337,566.937 313.105,0 566.923,-253.828 566.923,-566.937 0,-313.105 -253.818,-566.9219 -566.923,-566.9219 z M 0,1275.59 V 0 H 1275.59 V 1275.59 H 0"></path>
<path id="path18" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 1182.7,803.25 -83.09,-27.371 c 0,0 -15.88,47.094 -28.69,73.266 l 78.42,34.035 c -36.89,82.5 -92.99,138.56 -92.99,138.56 l -56.31,-66.342 c -88.317,100.652 -217.81,164.272 -362.231,164.272 -6.926,0 -13.793,-0.23 -20.645,-0.52 l 9.481,85.56 c 0,0 -79.282,3.67 -164.434,-26.6 l 29.719,-80.97 c -25.43,-8.07 -49.903,-18.26 -73.313,-30.25 l -37.254,78.35 C 300.449,1105 244.98,1047.7 244.98,1047.7 l 68.875,-53.161 C 216.836,906.391 155.918,779.199 155.918,637.781 c 0,-2.597 0.156,-5.156 0.195,-7.742 l -85.2341,11.035 c 0,0 -4.8008,-79.211 23.4063,-165.07 l 80.8318,27.16 c 7.465,-25.695 16.879,-50.547 28.313,-74.277 l -77.184,-34.453 c 38.281,-81.875 93.649,-139.735 93.649,-139.735 l 54.214,67.145 C 361.871,220.91 490.852,156.828 634.902,155.969 L 620.797,69.3594 c 0,0 78.945,-4.9375 166.043,19.1406 l -24.949,83.602 c 25.769,6.847 50.644,15.828 74.519,26.648 l 31.36,-79.398 c 83.601,34.328 141.38,88.66 141.38,88.66 l -64.712,58.008 c 107.042,88.394 175.252,222.105 175.252,371.761 0,4.434 -0.21,8.821 -0.33,13.223 l 84.98,-13.211 c 0,0 5.12,79.141 -21.64,165.457"></path>
<path id="path20" style="fill:none;stroke:#bdbcbc;stroke-width:2.18309999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 1077.17,637.781 c 0,-242.656 -196.705,-439.359 -439.361,-439.359 -242.657,0 -439.371,196.703 -439.371,439.359 0,242.657 196.714,439.369 439.371,439.369 242.656,0 439.361,-196.712 439.361,-439.369 z"></path>
<path id="path22" style="fill:#234d86;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 637.809,1070.07 c -238.746,0 -432.286,-193.543 -432.286,-432.289 0,-238.738 193.54,-432.281 432.286,-432.281 238.738,0 432.281,193.543 432.281,432.281 0,238.746 -193.543,432.289 -432.281,432.289 z m 0,-115.004 c 174.949,0 317.285,-142.332 317.285,-317.285 0,-174.949 -142.336,-317.285 -317.285,-317.285 -174.954,0 -317.286,142.336 -317.286,317.285 0,174.953 142.332,317.285 317.286,317.285"></path>
<g transform="scale(10)" id="g24"></g>
<g transform="translate(637.5,637.5) scale(1, -1) translate(-637.5,-637.5)">
<path id="top-text" d="M 637.5 637.5 m -340 0 a 340 340 0 0 1 680 0" fill="none" stroke="none"></path>
<text font-stretch="ultra-condensed" text-anchor="middle" stroke-width="2" style="white-space: pre" font-family="Arial" font-size="42" fill="#FFFFFF" stroke="#FFFFFF">
<textPath baseline-shift="10%" font-stretch="ultra-condensed" startOffset="50%" xlink:href="#top-text">test</textPath>
</text>
</g>
<g transform="translate(637.5,637.5) scale(-1, 1) translate(-637.5,-637.5)">
<path id="bottom-text" d="M 637.5 637.5 m 340 0 a 340 340 180 0 0 -680 0" fill="none" stroke="none"></path>
<text font-stretch="ultra-condensed" text-anchor="middle" stroke-width="2" style="white-space: pre" font-family="Arial" font-size="42" fill="#FFFFFF" stroke="#FFFFFF">
<textPath baseline-shift="-90%" font-stretch="ultra-condensed" startOffset="50%" xlink:href="#bottom-text">text text text</textPath>
</text>
</g>
</g>
</g>
<!--
Alternative 1: A path (e.g. a <circle>) with an image fill.
Note: The size of the pattern's <image> must correspond to the path's size (here: 40% diameter).
-->
<pattern id="path138img" patternUnits="objectBoundingBox" width="100%" height="100%">
<image xlink:href="https://configurator.kriger.nl/uploads/cropped/kingfischer_1.jpg" width="40%" height="40%" />
</pattern>
<circle id="path138" cx="50%" cy="25%" r="20%" fill="url(#path138img)" />
<!--
Alternative 2: An <image> with a clipPath (e.g. a <circle>).
Note: With `objectBoundingBox`, the coordinates for the clipPath's <circle> are relative to the clipped image, ranging from 0 to 1.
-->
<clipPath id="myClip" clipPathUnits="objectBoundingBox" >
<circle cx=".5" cy=".5" r=".5" />
</clipPath>
<image x="30%" y="55%" width="40%" height="40%" clip-path="url(#myClip)" xlink:href="https://configurator.kriger.nl/uploads/cropped/kingfischer_1.jpg" />
</svg>
Where the scaling and positioning is set:
I have a scene i created in illustrator, exported as svg. Its a wrightflyer plane inside of a rectangle. I'm using snapsvg to load the svg file, and i am trying to animate it from one side of the rectangle to the other, the rectangle being a clipping mask. I want the plane to disappear when it travels out of the rect bounding box.
I can get clip-paths working just fine on simple, static (not-animated) shapes like circles and such. The clip-path i have clipping the plane group simple does nothing. No clipping at all. Below is the portion of my SVG giving me trouble, can anyone help me diagnose this?
<g id="wrightclipgroup">
<defs>
<clipPath id="wrightclip">
<rect x="675.855" y="341.69" width="375.542" height="302.107"/>
</clipPath>
</defs>
<g id="wrightflyer" clip-path="url(#wrightclip)">
<rect x="721.875" y="438.898" fill="#565656" width="65.048" height="1.432"/>
<g id="wrightbrother">
<circle fill="#E2D19C" cx="780.253" cy="437.305" r="3.918"/>
<path fill="#623619" d="M780.253,433.387c-2.164,0-3.918,1.754-3.918,3.918c0,0.505,0.104,0.984,0.278,1.428l0.245,0.1
c0.428,0.155,0.948,0.008,1.232-0.348c0.231-0.289,0.299-0.671,0.424-1.019c0.125-0.348,0.357-0.708,0.721-0.777
c0.383-0.073,0.74,0.203,1.122,0.281c0.655,0.134,1.282-0.326,1.727-0.826c0.412-0.464,0.744-1.007,0.958-1.587
C782.33,433.836,781.344,433.387,780.253,433.387z"/>
<g>
<path fill="#4068B2" d="M788.92,451.728c-0.185-1.142-0.183-2.385-1.438-2.647c-0.647-0.135-3.458,2.14-4.441,2.946
c-1.724,1.415-2.08,1.869-3.353,3.699c0.129-0.984,1.908-1.983,2.037-2.967l0-0.001c-2.284,0.319-4.527,0.914-6.671,1.763
c0.199,1.201,0.51,2.41,0.824,3.681c0.139,0.564,0.378,1.277,0.776,1.701c0.381,0.405,0.797,0.531,1.349,0.595
c2.609,0.299,3.473,0.237,4.767-0.893c0.981-0.857,2.172-2.852,2.938-4.227l-0.067,0.124l0.157,5.283l2.549-0.049
c0.127,0.007,0.269,0.009,0.362-0.077c0.072-0.066,0.097-0.169,0.117-0.264c0.151-0.722,0.266-1.452,0.344-2.186
C789.4,456.039,789.269,453.875,788.92,451.728z"/>
<path fill="#355587" d="M785.677,460.912l-0.148-4.963c-1.073,1.875-1.972,3.135-2.677,3.751
c-0.922,0.805-1.635,1.077-2.828,1.077c-0.492,0-1.082-0.045-2.035-0.154c-0.559-0.063-1.015-0.196-1.426-0.633
c-0.335-0.356-0.606-0.947-0.806-1.756l-0.099-0.4c-0.282-1.137-0.549-2.211-0.728-3.291l-0.016-0.1l0.094-0.037
c2.162-0.855,4.416-1.452,6.7-1.771l0.236-0.033l-0.099,0.196c-0.006,0.038-0.014,0.076-0.024,0.114
c0.311-0.288,0.677-0.601,1.14-0.981c2.408-1.978,3.909-2.98,4.459-2.98c0.031,0,0.06,0.003,0.086,0.008
c1.183,0.246,1.33,1.298,1.473,2.316c0.02,0.145,0.041,0.29,0.064,0.433c0.383,2.361,0.465,4.491,0.251,6.513
c-0.078,0.736-0.194,1.476-0.346,2.199c-0.02,0.093-0.049,0.233-0.155,0.331c-0.11,0.101-0.255,0.113-0.354,0.113
c0,0,0,0,0,0c-0.033,0-0.066-0.001-0.099-0.003L785.677,460.912z M785.767,455.532l0.152,5.125l2.426-0.047
c0.037,0.001,0.066,0.003,0.094,0.003h0c0.093,0,0.15-0.014,0.186-0.047c0.043-0.039,0.062-0.116,0.079-0.198
c0.15-0.715,0.265-1.446,0.342-2.174c0.212-2,0.131-4.108-0.249-6.447c-0.023-0.145-0.044-0.292-0.064-0.438
c-0.137-0.975-0.266-1.896-1.276-2.105c-0.01-0.002-0.022-0.003-0.036-0.003c-0.222,0-1.087,0.285-4.301,2.924
c-1.738,1.427-2.096,1.9-3.33,3.674l-0.293,0.422l0.066-0.509c0.07-0.533,0.569-1.052,1.052-1.554
c0.4-0.416,0.812-0.844,0.946-1.249c-2.169,0.318-4.31,0.887-6.368,1.693c0.177,1.036,0.434,2.075,0.707,3.172l0.099,0.4
c0.189,0.766,0.439,1.32,0.745,1.645c0.36,0.383,0.754,0.497,1.272,0.556c0.944,0.108,1.525,0.152,2.007,0.152
c1.137,0,1.784-0.247,2.664-1.015c0.745-0.651,1.725-2.062,2.911-4.194l0.219,0.12L785.767,455.532z"/>
</g>
<g>
<path fill="#355587" d="M781.471,443.27c-0.544-1.063-1.693-1.788-2.887-1.822c-1.193-0.034-2.382,0.624-2.987,1.653
c-0.463,0.788-0.609,7.245-0.701,8.155c-0.111,1.109-0.022,2.185,0.157,3.267c2.144-0.849,4.387-1.444,6.67-1.763
C781.899,451.421,782.085,444.47,781.471,443.27z"/>
<path fill="#355587" d="M774.956,454.696l-0.025-0.153c-0.208-1.254-0.258-2.303-0.158-3.299
c0.023-0.228,0.05-0.824,0.084-1.578c0.138-3.042,0.3-6.061,0.633-6.628c0.612-1.042,1.792-1.716,3.006-1.716l0.092,0.001
c1.23,0.036,2.434,0.795,2.995,1.89c0.636,1.243,0.439,8.238,0.266,9.563l-0.012,0.095l-0.095,0.013
c-2.265,0.316-4.5,0.907-6.642,1.755L774.956,454.696z M778.495,441.571c-1.126,0-2.222,0.625-2.79,1.593
c-0.33,0.561-0.505,4.433-0.599,6.513c-0.035,0.758-0.062,1.357-0.085,1.591c-0.094,0.934-0.052,1.917,0.131,3.082
c2.086-0.813,4.258-1.385,6.459-1.7c0.164-1.488,0.337-8.172-0.252-9.323c-0.521-1.016-1.637-1.721-2.779-1.754
L778.495,441.571z"/>
</g>
<path fill="#E2D19C" d="M777.009,451.274c0.484,0.074,0.976-0.031,1.45-0.155c1.749-0.46,3.411-1.196,5.064-1.929
c1.009-0.447,2.018-0.895,3.027-1.342c0.316-0.14,0.656-0.301,0.817-0.607c0.263-0.499-0.113-1.143-0.63-1.368
c-0.517-0.224-1.11-0.146-1.666-0.052c-2.57,0.437-5.098,1.133-7.511,2.121c-0.966,0.395-2.051,1.025-2.124,2.066
C775.689,450.666,776.312,451.167,777.009,451.274z"/>
<path fill="#355587" d="M785.983,435.363c-0.058-0.067-0.156-0.082-0.244-0.092c-0.735-0.082-1.473-0.129-2.212-0.157
c0.061-0.231,0.235-0.442,0.413-0.613c0.248-0.237,0.534-0.484,0.586-0.823c0.008-0.054,0.009-0.114-0.024-0.158
c-0.03-0.04-0.08-0.058-0.128-0.073c-0.423-0.13-0.866-0.183-1.307-0.232c-1.835-0.204-3.709-0.362-5.513,0.034
c-0.334,0.073-0.668,0.167-0.961,0.342s-0.544,0.442-0.641,0.769c-0.054,0.185-0.058,0.381-0.048,0.574
c0.021,0.383,0.069,0.718,0.298,1.029c0.203,0.275,0.514,0.454,0.841,0.539c0.413,0.108,0.847,0.083,1.273,0.054
c2.419-0.162,4.829-0.432,7.234-0.739c0.128-0.016,0.264-0.036,0.365-0.116C786.019,435.624,786.068,435.461,785.983,435.363z
"/>
</g>
<path fill="#565656" d="M878.392,431.787l-1.012,29.019c-3.535,1.211-19.144,5.778-63.924,10.202
c-8.71,0.861-17.233,1.595-25.406,2.226l3.238-62.418l-2.925-0.152l-3.257,62.793c-14.935,1.118-28.577,1.881-39.791,2.397
l25.043-11.64l-1.234-2.656l-31.468,14.626c-11.9,0.481-19.985,0.651-22.306,0.693l-14.889-17.398l-2.226,1.904l15.784,18.443
l0.686-0.009c0.214-0.003,10.398-0.158,26.55-0.851l15.146,8.668c-0.51,1.243-0.586,2.71-0.014,4.213
c0.512,1.345,1.604,2.437,2.949,2.949c4.257,1.62,8.256-1.883,7.543-6.055c-0.101-0.592-0.307-1.15-0.589-1.664l14.151-10.342
c10.51-0.747,21.748-1.671,33.302-2.813c52.715-5.208,65.156-10.523,65.66-10.747l0.837-0.372l1.078-30.915L878.392,431.787z
M765.443,485.924c-0.792-0.83-1.835-1.42-3-1.619c-2.168-0.371-4.148,0.537-5.329,2.086l-13.18-7.543
c9.632-0.432,21.157-1.05,33.825-1.926L765.443,485.924z"/>
<rect x="748.401" y="412.873" transform="matrix(0.9999 0.0144 -0.0144 0.9999 6.3635 -10.7405)" fill="#565656" width="2.929" height="48.302"/>
<rect x="745.169" y="436.197" transform="matrix(0.3088 0.9511 -0.9511 0.3088 947.8507 -430.3655)" fill="#565656" width="49.688" height="1.464"/>
<path fill="#ED5822" d="M889.244,432.359c-8.505,0.197-17.01,0.394-25.516,0.59c-3.108,0.072-6.281,0.135-9.249-0.79
c6.325-1.477,12.867-1.7,19.359-1.917c5.995-0.2,12.057-0.395,17.934,0.807C891.608,432.072,890.279,432.335,889.244,432.359z"
/>
<path fill="#ED5822" d="M888.898,442.284c-8.505,0.197-17.01,0.394-25.516,0.59c-3.108,0.072-6.281,0.135-9.249-0.79
c6.325-1.477,12.867-1.7,19.359-1.917c5.995-0.2,12.057-0.395,17.934,0.807C891.261,441.997,889.933,442.26,888.898,442.284z"
/>
<path fill="#EC5924" d="M698.652,466.032c-1.954-0.835-3.907-1.67-5.861-2.505c-0.823-0.352-1.695-0.743-2.181-1.495
c-0.374-0.579-0.465-1.29-0.539-1.976c-0.711-6.516-0.852-13.095-0.422-19.635c4.482-0.948,8.918-2.116,13.286-3.499
c0.075,8.595,0.15,17.191,0.225,25.786c0.012,1.387-0.141,3.063-1.38,3.687C700.81,466.883,699.65,466.458,698.652,466.032z"/>
<path fill="#ED5822" d="M800.45,415.003c-16.447,0.38-32.894,0.761-49.341,1.142c-6.01,0.139-12.146,0.261-17.885-1.527
c12.232-2.857,24.881-3.288,37.435-3.706c11.594-0.387,23.315-0.763,34.68,1.56C805.019,414.447,802.45,414.956,800.45,415.003
z"/>
<path fill="#ED5822" d="M798.731,464.273c-16.447,0.38-32.894,0.761-49.341,1.142c-6.01,0.139-12.146,0.261-17.885-1.527
c12.231-2.857,24.881-3.288,37.435-3.706c11.594-0.387,23.315-0.763,34.68,1.56
C803.301,463.717,800.731,464.227,798.731,464.273z"/>
<path id="wrightprop" fill="#B73E18" d="M721.875,439.189c-0.004-0.085-3.994-19.75-0.498-20.062
c3.496-0.311,1.051,18.368,0.498,20.858c-0.553,2.491-3.315,21.169-0.297,20.028
C724.596,458.872,721.984,441.713,721.875,439.189z"/>
</g>
</g>
I found the answer, the clip-path has to also be transformed/animated if i animate the transformations of the group, per the answer on this question