SVG clip-path not working with large group animated with snapsvg - svg
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
Related
How to make SVG stroke-width consistent across the entire path?
Here is an example: <svg width="60" height="30"> <path stroke="red" stroke-width="1" fill="none" d="M0 25 L10 25 L45 5 L55 5"/> </svg> I find that the inclined line segment has a thinner stroke-width then the horizontal lines. How do I make the stroke-width consistent across the entire path? Breaking the path into multiple paths did not help as the line joins are not elegant. The points are generated dynamically so the solution needs to be generic.
<svg width="180" height="120"> <g stroke="red" fill="none"> <g stroke-width="1"> <path id="p" d="M0 25l10 0l35-20l10 0" /> <use href="#p" y="25" shape-rendering="optimizeQuality"/> <use href="#p" y="50" shape-rendering="crispEdges"/> </g> <use href="#p" stroke-width="2" x="60"/> <use href="#p" stroke-width="3" x="120"/> </g> </svg> I added stroke-width 2 and 3 to your example. The effect is less because more pixels are being used to draw the line. At 1 pixel your monitor and Browser can't make much of it. Only add (some) anti-aliasing. screenshot zoomed: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering won't help because it is still your monitor/browser only having 1 pixel to draw that line Same for CSS https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering.. it is still 1 pixel Same for setting style="transform:translateZ(0)" Maybe in the future with Quantum Dot display technology it will look better. https://en.wikipedia.org/wiki/Next_generation_of_display_technology
SVG rendering issue. SVGs are rendered differently on different Shopify product pages
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>
How to merge two svg flile
I have two files(svg) from get font-awesome 1 Icon search https://fontawesome.com/icons/search?style=solid 2 Icon desktop https://fontawesome.com/icons/desktop?style=solid I would like to get finish result like I'm sorry, I can't use Adobe Illustrator Thank you in advance your diligence
Im putting both paths (the computer #cp and the magnifying glass) in the same svg element. Please note that the magnifying glass is a symbol and has it's own viewBox attribute. This will allow me to resize it and position it as needed by using a <use> element with a position (x, y) and a size (width): <use xlink:href="#mg" fill="red" width="300" x="400" y="100" stroke-width="30" stroke="white" paint-order = "stroke fill" /> I hope you'll find this useful: <svg viewBox="0 0 700 540" > <defs> <symbol viewBox="-20 0 500 438" id="mg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M287.686,317.613c-44.246,32.716-92.632,44.711-145.867,34.022 c-44.507-8.937-80.279-32.364-107.23-68.768C-17.896,211.978-9.703,111.877,52.721,50.913 c65.372-63.843,167.875-67.842,237.902-10.879c64.849,52.75,93.084,159.289,27.631,247.105c4.34,0,8.222,0.143,12.089-0.031 c6.949-0.312,12.7,2.262,17.505,7.059c27.479,27.436,54.99,54.837,82.342,82.398c10.109,10.187,9.872,21.971-0.188,32.144 c-7.265,7.347-14.526,14.699-21.934,21.901c-9.676,9.407-20.949,9.446-30.493-0.055c-27.99-27.865-55.854-55.857-83.824-83.743 c-5.25-5.234-6.842-11.599-6.585-18.683C287.279,324.973,287.475,321.819,287.686,317.613z M68.576,177.429c-0.658-58.105,47.084-109.266,109.23-109.212 c60.523,0.052,109.069,48.696,109.216,109.302c0.145,60.339-48.154,109.597-109.557,109.436 C115.029,286.791,67.692,235.734,68.576,177.429z"/> </symbol> </defs> <g id="cp"> <path fill-rule="evenodd" d="M355.128,397.23c4.431,13.312,8.741,26.191,12.992,39.09 c0.933,2.829,3.232,1.861,5.027,1.868c19.163,0.074,38.327-0.067,57.488,0.113c11.443,0.107,20.518,9.763,20.256,21.033 c-0.233,10.074-8.367,18.81-18.422,19.729c-1.655,0.151-3.329,0.136-4.994,0.136c-75.652,0.009-151.304-0.029-226.955,0.067 c-8.242,0.011-15.168-2.292-19.817-9.298c-4.163-6.274-4.849-13.108-1.293-19.912c3.73-7.136,9.618-11.604,17.847-11.695 c18.994-0.211,37.993-0.229,56.985,0.009c4.068,0.051,5.775-1.184,6.953-5.021c3.267-10.639,6.842-21.191,10.627-31.657 c1.416-3.917,0.533-4.573-3.4-4.564c-52.822,0.118-105.646,0.12-158.468,0.051c-18.57-0.024-32.642-9.713-39.553-26.76 c-2.249-5.548-2.435-11.332-2.434-17.184c0.015-49.49,0.002-98.98,0.003-148.47c0.001-40.492-0.057-80.984,0.044-121.476 c0.046-18.598,10.123-32.75,27.482-39.483c5.455-2.116,11.1-2.012,16.745-2.013c94.647-0.024,189.296-0.016,283.943-0.012 c40.658,0.002,81.319,0.241,121.975-0.085c18.796-0.151,33.316,10.927,39.614,26.602c2.225,5.539,2.468,11.321,2.466,17.178 c-0.024,58.322-0.019,116.644-0.019,174.965c-0.001,30.827-0.705,61.676,0.232,92.475c0.729,23.897-17.471,44.839-44.371,44.501 c-51.481-0.646-102.977-0.188-154.466-0.187C359.634,397.23,357.65,397.23,355.128,397.23z M314.081,96.229c61.994,0,123.988,0.045,185.981-0.096 c4.433-0.01,5.834,0.936,5.824,5.659c-0.16,78.492-0.163,156.984,0.005,235.477c0.01,4.762-1.452,5.607-5.818,5.604 c-123.987-0.112-247.976-0.114-371.963-0.003c-4.371,0.004-5.832-0.848-5.821-5.604c0.166-78.491,0.163-156.984,0.006-235.476 c-0.009-4.686,1.333-5.693,5.805-5.683c61.994,0.145,123.988,0.098,185.981,0.098C314.081,96.212,314.081,96.22,314.081,96.229z"/> </g> <use xlink:href="#mg" width="300" x="400" y="100" stroke-width="30" stroke="white" paint-order = "stroke fill" /> </svg>
Improve SVG so pin is centered inside circle, without multiple viewboxes
I have a pin that needs to be shown inside a circle in Svg. My current code is the following: <svg viewBox="0 0 20 20" preserveAspectRatio="xMinYMin meet"> <circle cx="50%" cy="1.5" r="1.5" style="fill: green;"></circle> <svg x="47.5%" y="5%" viewBox="0 0 10000 10000" fill="#fff" preserveAspectRatio="none"> <g> <path d="M250,124.3c-35,0-63.4,28.8-63.4,64.1c0,35.3,28.5,64,63.4,64s63.4-28.8,63.4-64.1C313.4,153,285,124.3,250,124.3z M250,222c-18.3,0-33.2-15.1-33.2-33.7s14.9-33.7,33.2-33.7s33.2,15.1,33.2,33.7S268.3,222,250,222z"> </path> <path d="M250,50.9c-74.9,0-135.8,61.6-135.8,137.4c0,31.3,22.5,84.4,66.9,157.7c32.9,54.4,66.2,100.3,66.6,100.7l2.4,3.3l2.4-3.3 c0.3-0.5,33.7-46.3,66.6-100.7c44.4-73.3,66.9-126.4,66.9-157.7C385.8,112.5,324.9,50.9,250,50.9z M250,397.6 c-16.5-24.3-45.5-68.4-69.9-114c-23.5-44-35.9-77-35.9-95.4c0-59,47.4-107,105.8-107s105.8,48,105.8,107 c0,18.4-12.4,51.4-35.9,95.4C295.4,329.3,266.5,373.4,250,397.6z"> </path> </g> </svg> </svg> which works somewhat but seems inelegant, and perhaps also buggy. What I would like is a better way to center the group 'inside' the circle without using JavaScript It would be nice if I could get rid of the extra SVG element in the middle with its really big viewBox that I'm using to place the pin. So if you can show me how to do it with just a g and make a scaling function that would be good.
If you want to use coordinates that contain percentage values, you need an element that has x and y attributes. <use> is such an element, <g> is not. Your live will be easier if you draw your pin centered on the origin of the coordinate system: translate(-250 -230). After that, you can easily scale it to the size you need: scale(0.0025) (remember: multiple transform commands are processed right-to-left.) Finally, you use the pin template with the same x and y coordinates as your circle. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" preserveAspectRatio="xMinYMin meet"> <defs> <!--center the pin around the origin and scale it to final size--> <g id="pin" transform="scale(0.0025) translate(-250 -230)"> <path d="M250,124.3c-35,0-63.4,28.8-63.4,64.1c0,35.3,28.5,64,63.4,64s63.4-28.8,63.4-64.1C313.4,153,285,124.3,250,124.3z M250,222c-18.3,0-33.2-15.1-33.2-33.7s14.9-33.7,33.2-33.7s33.2,15.1,33.2,33.7S268.3,222,250,222z" /> <path d="M250,50.9c-74.9,0-135.8,61.6-135.8,137.4c0,31.3,22.5,84.4,66.9,157.7c32.9,54.4,66.2,100.3,66.6,100.7l2.4,3.3l2.4-3.3 c0.3-0.5,33.7-46.3,66.6-100.7c44.4-73.3,66.9-126.4,66.9-157.7C385.8,112.5,324.9,50.9,250,50.9z M250,397.6 c-16.5-24.3-45.5-68.4-69.9-114c-23.5-44-35.9-77-35.9-95.4c0-59,47.4-107,105.8-107s105.8,48,105.8,107 c0,18.4-12.4,51.4-35.9,95.4C295.4,329.3,266.5,373.4,250,397.6z" /> </g> </defs> <!--use the same coordinates for the center of the circle and the pin--> <circle cx="50%" cy="1.5" r="1.5" fill="green" /> <use xlink:href="#pin" x="50%" y="1.5" fill="white" /> </svg>
Responsive svg clipPath with background image
I need to apply an SVG as a clipping path to a container with a repeating background image. The effect will mean, in this case, a textured background to a piece of SVG text.
I have managed to get this to work with the following;
<div class="word">
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550.6 144.52" height="0" width="0">
<clippath id="clipPath">
<path d="M203.78,426.6c-3.26,1.51-6.26,3.11-9.41,4.3-2.56,1-5.18,2.74-8.09,1.33a15.48,15.48,0,0,1-8.19-8.66c-0.43-1.16-.88-2.31-1.48-3.87-1,1.15-2,2.05-2.73,3.07-3.88,5-9.15,8.19-14.83,10.67-2.65,1.16-5.54,1.49-8.05-.55s-2.82-4.79-2.31-7.72a30.69,30.69,0,0,0,.81-6.31c-2,1.17-4,2.3-6,3.51-3.24,2-6.31,4.28-9.7,5.92a11,11,0,0,1-10.79-.4c-1.7-1-2.7-.72-4.14.84-4.74,5.12-9.69,10-14.74,14.85s-12,2.27-15.12-2.86c-4.25-7-3.87-14.55-2.49-22.05A328.77,328.77,0,0,1,100.28,369c0.72-2-.09-2.56-1.71-2.87-4.08-.77-8.16-0.92-12,1A35.93,35.93,0,0,0,82.65,370c-0.55.38-1.45,0.88-1.86,0.67a2.05,2.05,0,0,1-.84-1.82,6.55,6.55,0,0,1,1.7-2.88c3.9-3.47,8.67-4.39,13.71-4.28a32.55,32.55,0,0,1,5.47.49c1.8,0.35,2.74-.23,3.51-1.86,1.76-3.76,3.71-7.43,5.58-11.15,1.77-3.52,2.84-4.15,6.17-2.11a45.54,45.54,0,0,1,7.63,6.59c0.38,0.37,0,1.91-.42,2.63-1,1.61-2.35,3-3.5,4.55a24.48,24.48,0,0,0-1.39,2.47c4.27,0.19,7.87-.13,11.38-1.67a17,17,0,0,1,3.9-.72,17.47,17.47,0,0,1-1.69,3.61c-3,3.82-6.76,5.41-11.65,4-3.58-1-4.93-.35-6.06,2.76-3.63,10-7.36,20-10.65,30.06-1.4,4.31-1.81,8.95-2.65,13.44-0.67,3.59-1.68,7.16-1.88,10.78a42.52,42.52,0,0,0,1,9.38,3.33,3.33,0,0,0,4.64,2.43,20.31,20.31,0,0,0,5.25-4c1.91-2.06,3.39-4.53,5.15-6.74,2.38-3,3.92-6,3.82-10.14-0.11-5,2.46-9.38,5.46-13.15,4.09-5.13,8.59-9.95,14.77-12.8a22,22,0,0,1,15.29-1.67c3,0.8,4.69,3.32,4.7,7.1,0,2.37-1.84,4.35-5.09,5.23a32.4,32.4,0,0,0,0-4.85c-0.53-3.42-1.49-4-4.35-2.19a43.11,43.11,0,0,0-14.59,14.75,60.08,60.08,0,0,0-4.66,9.62c-1.48,4-.25,5.4,3.88,4.66a12.31,12.31,0,0,0,4.61-1.7c5.25-3.52,10.38-7.22,15.53-10.88A5,5,0,0,0,156,409c1-1.79,2.46-2.07,4.25-1.72,5.18,1,5.94,3.47,3.08,7.9a115,115,0,0,0-6.27,11.9c-0.81,1.64-.1,2.78,1.78,2.22a14.21,14.21,0,0,0,5.32-2.46,125.49,125.49,0,0,0,10.43-10.38,8.24,8.24,0,0,0,1.5-4.77A73.31,73.31,0,0,1,181.79,386c0.79-1.81,1.83-2.51,3.84-2.25,6.33,0.81,9.86,5.14,12.65,10.18,0.46,0.83-.43,2.82-1.23,3.87a42.35,42.35,0,0,0-9,25.41c-0.08,3.57,1.24,4.64,4.6,3.27a55.2,55.2,0,0,0,8.59-4.5c3-1.91,4.48-4.77,5-8.47,0.91-6.65,2.32-13.25,3.68-19.83a13.85,13.85,0,0,1,2-4c3.56-5.93,6.8-6.23,13.57-3.47a19.47,19.47,0,0,1,2.92,1.91,3.13,3.13,0,0,1,1.2,4.54c-1.55,2.73-3,5.64-5.1,7.91a26.82,26.82,0,0,0-7.62,18.7,49.6,49.6,0,0,1-.58,5.3l0.58,0.31a16.68,16.68,0,0,0,2.24-1.68c7.29-7.64,14.53-15.33,21.86-22.94,0.95-1,1.62-3.32,3.65-1.91s0.39,3-.28,4.38a50.23,50.23,0,0,1-10.79,14.57c-5.63,5.43-11.46,10.64-17.06,16.1a8.44,8.44,0,0,0-2,4.11c-1.24,5.69-2.06,11.47-3.43,17.12-3.61,14.91-12,26.35-25.59,33.67-6,3.22-12.14,2.5-17.88-.85-4.89-2.85-6.28-8.44-4.15-14.51a36,36,0,0,1,11.49-15.75c7.68-6.35,15.66-12.35,23.74-18.19C203.7,435.37,204.92,433.24,203.78,426.6Zm-2.84,20.54-0.84-.42c-5.56,4.21-11.44,8.07-16.6,12.71-6.16,5.54-12.18,11.35-15,19.62-1.66,5,.24,7.64,5.45,7.34,4.16-.24,7.13-2.53,9.69-5.5,7.29-8.45,13.4-17.58,16-28.64Zm18-49.36,0.89,0.45c1.54-2.22,3.12-4.42,4.58-6.69a3.59,3.59,0,0,0-.05-1.74,3,3,0,0,0-1.54.14A11.5,11.5,0,0,0,218.92,397.78Z" transform="translate(-12.27 -345.86)"/>
<path d="M514.79,416.66c-2.39,2.92-4.3,5.53-6.5,7.87A31.22,31.22,0,0,1,493,434c-5.5,1.36-9.24-2.46-8.43-8.15a40.68,40.68,0,0,0,.86-6.94,58.75,58.75,0,0,0-6,3.64c-3.84,3-7.63,5.79-12.6,6.72-4,.74-7.26-0.69-10.32-2.7-1.05-.69-1.37-2.49-2.18-4.07a18.89,18.89,0,0,0-2,1.8c-4.09,4.81-9.58,7.53-15.34,9.42A16.38,16.38,0,0,1,425,432.56c-2.31-1.08-3.06-3.48-3-5.92,0.05-3.81.31-7.62,0.49-11.77a9.32,9.32,0,0,0-1.63,1c-7.9,7.82-17.37,13.06-27.76,16.69a14.25,14.25,0,0,1-6.38.73,8.08,8.08,0,0,1-4.53-2.56,19.34,19.34,0,0,1-4.7-13.59c0-1.87-.74-2.23-2.53-2.42-4.5-.47-7.41,1-9.44,5.22-1.4,2.94-3.81,5.43-5.94,8a5.94,5.94,0,0,1-6.5,2.07c-3.13-.85-6.33-1.45-9.41-2.45-4.66-1.51-6.15-5.64-6.5-9.81-0.76-9.11,3.31-16.6,9-23.34a2,2,0,0,1,1.51-.71c2.54,0.53,2.74-1.08,3.13-2.93a24.27,24.27,0,0,1,1.87-5.64c1.7-3.49,4.17-4.52,8-3.93,4,0.62,7.86,1.41,10.31,5.2,3.38,5.24,3.78,10.87,2.44,16.77-0.33,1.44-.71,2.87-1.07,4.28,3.55,1.13,6.41-.09,8-3.07,3.66-6.83,8.59-12.46,15.74-15.8,2.93-1.37,6-2,9.2-.94,1.89,0.63,3.86,1,5.79,1.52,5.13,1.41,7.29,5.93,5.08,10.85a20.09,20.09,0,0,1-3,5.25c-1.81,2-5.41,2.34-6.49,1-1.28-1.56-.15-5,2.05-6.8a6.61,6.61,0,0,0,2.17-2.85c0.89-3-.79-4.78-3.82-4.18a7,7,0,0,0-3.21,1.72c-7.58,7-11.62,15.89-13.16,26a13.64,13.64,0,0,0,.42,4.93c0.5,2.19,2.16,3,4.38,2.52a40.4,40.4,0,0,0,21.13-12,19.7,19.7,0,0,1,1.74-1.79c6.47-5.33,9.91-12.59,12.71-20.21,0.71-1.93,1.67-3,3.76-2.74a59.38,59.38,0,0,1,8,1.28c2.72,0.76,3.22,2.51,2.22,5.2-2.89,7.69-5.76,15.39-8.53,23.13-0.48,1.33-.4,2.86-0.66,5a37.51,37.51,0,0,0,4.73-1.47c2.17-1,4.23-2.3,6.36-3.43,5.28-2.8,8.42-7.15,11-12.61a36,36,0,0,1,19.59-18.32,19.36,19.36,0,0,1,13-.72c3,0.9,4.69,3.33,4.71,7.11,0,2.37-1.82,4.34-5,5.22a36.68,36.68,0,0,0,0-4.34c-0.45-3.73-1.65-4.49-4.66-2.57a43.33,43.33,0,0,0-14.38,14.63,61.22,61.22,0,0,0-4.66,9.62c-1.49,4-.25,5.4,3.87,4.66a12.3,12.3,0,0,0,4.61-1.7c5.25-3.52,10.38-7.22,15.53-10.88A5,5,0,0,0,492,409c1-1.8,2.46-2.07,4.25-1.72,5.18,1,5.94,3.47,3.08,7.9a115.05,115.05,0,0,0-6.27,11.9c-0.81,1.64-.11,2.75,1.79,2.22,1.73-.48,3.72-1,4.93-2.14,4.81-4.7,9.38-9.65,14-14.54,2.72-2.88,3.39-6.62,4-10.31,2.51-15.88,8.75-30.46,15.52-44.85,1.84-3.91,4.24-7.53,8-10.07a6.73,6.73,0,0,1,7.32-.64c2.37,1.32,4.27,3.31,4.38,6.5a39.94,39.94,0,0,1-7.34,24.66c-3.59,5.2-7.91,9.91-11.34,15.19-1.94,3-3,6.62-4,10.09-1.09,3.66-1.59,7.48-2.51,11.19-1.31,5.27.12,10.24,1.5,15.22,0.54,2,2.25,2.58,4.18,1.66a23.54,23.54,0,0,0,9.6-8.49q8.25-12.5,16.6-24.93a14.66,14.66,0,0,1,2.21-2.15l1,0.77c-1.27,2.21-2.47,4.47-3.83,6.63-2.77,4.43-5.89,8.66-8.36,13.24-4.34,8.06-9.39,15.46-16.47,21.4-4.86,4.08-11.77,3.4-14.73-2.88-2.5-5.31-4.57-10.49-4.39-16.41A11.64,11.64,0,0,0,514.79,416.66ZM535,385.54l0.75,0.32a5.81,5.81,0,0,0,1.16-.83c4.41-5.21,8.89-10.46,11.11-17,1.48-4.35,2.12-9,3-13.53,0.39-2-1.14-3-2.62-3.36-0.82-.18-2.26.73-2.83,1.56A19.24,19.24,0,0,0,542.9,358c-2.09,6.89-4,13.85-6,20.78C536.29,381,535.62,383.27,535,385.54Zm-181.38,19c-3.59,3.2-7.85,12.63-6.7,18.69,0.3,1.56,1.34,2.18,2.46,1.54a59.78,59.78,0,0,0,9.74-6.31c1.61-1.39,2.52-3.94,3-6.13,0.13-.66-2.4-1.85-3.71-2.8a4,4,0,0,1-.57-0.49Zm11.3,3.51c1.06-3.86,2.49-7.28,2.83-10.81,0.31-3.29-.44-6.71-1-10a3.56,3.56,0,0,0-1.89-2c-0.29-.15-1.32.79-1.78,1.41a16.37,16.37,0,0,0-2.86,13C360.71,402.58,361.5,405.73,364.88,408.07Z" transform="translate(-12.27 -345.86)"/>
<path d="M43.08,460.72c-6.52-.46-13.17-0.46-18.92-4.38-8.3-5.67-15.67-19.52-9.74-33.24,4.27-9.9,10-11.39,19.93-9.57,7.46,1.36,11,7.15,9.68,14.55-1.28,6.9-9.67,11.13-15.39,7.75-2.27-1.34-3.2-4.41-1.67-6.47,0.56-.75,1.92-0.92,2.91-1.35,0.17,0.87.39,1.73,0.49,2.6,0.12,1.07.13,2.15,0.19,3.22,1.2-.27,2.67-0.18,3.56-0.86,3.86-2.94,5.23-10,3-13.54-2.14-3.34-5.27-3.87-8.89-3.77-4.52.12-7.37,2.61-9.08,6.35-3.19,7-3.79,14.12.56,21,1.59,2.49,3.35,4.88,5.16,7.21,4.92,6.34,14.63,6,20.42,2,6.85-4.64,10.91-10.81,11.92-19.22,0.93-7.77-.38-15.27-1.41-22.84-1-7.34-2.16-14.65-3.22-22-0.39-2.67-.72-2.93-3.13-1.85-5.07,2.29-10,5-15.2,6.84-7,2.43-13.62,1.55-18.9-4.38-2.34-2.63-2.68-7.55-.36-10.15a4.61,4.61,0,0,1,3.32-1.58,3.51,3.51,0,0,1,2.43,2.42,3.38,3.38,0,0,1-2.3,2.46c-2,0-2,1.18-2,2.43,0,3.48,2.94,6.13,7,6.47,4.93,0.42,9.36-1.3,13.65-3.35,4.5-2.15,8.82-4.66,13.27-6.9A4.62,4.62,0,0,0,53,376.74c1.14-7.78,3.74-15,9-21,3.67-4.26,8-6.57,13.8-5.88a4.45,4.45,0,0,1,4.31,4.09c0.77,5.11-1.37,9.31-4.59,13-2.74,3.11-5.88,5.87-8.65,9a6,6,0,0,0-1.46,3.71,81.16,81.16,0,0,0,3,20.16c2.81,10.76,5.49,21.57,4.9,32.92-0.42,8-3.23,14.65-9.43,19.84C57.83,457.51,51.35,461.31,43.08,460.72Zm33.55-105.4c-5.24.85-11,9.87-9.33,14.41C71,367,76.37,358.73,76.63,355.32Z" transform="translate(-12.27 -345.86)"/>
<path d="M298.7,460.71c-6.36-.45-12.87-0.46-18.44-4.31-8.94-6.18-16.28-20.4-9.09-35,4-8.16,9.85-9.65,19.3-7.84,7.39,1.42,11,7.3,9.53,14.66-1.34,6.78-9.58,10.92-15.26,7.68a4.53,4.53,0,0,1-1.82-6.42c0.53-.78,1.88-1,2.85-1.49,0.19,0.92.43,1.83,0.57,2.76s0.23,2.11.35,3.17c1.13-.26,2.51-0.2,3.36-0.84,3.86-2.88,5.33-10,3.11-13.52-2.1-3.36-5.21-4-8.84-3.88-4.51.09-7.43,2.52-9.15,6.25-3.22,7-3.88,14.11.45,21a86.6,86.6,0,0,0,5.32,7.41c4.79,6.07,14,6,19.8,2.26,7.12-4.52,11.39-10.8,12.43-19.43,0.94-7.76-.34-15.27-1.38-22.85-1-7.33-2.17-14.65-3.23-22-0.41-2.84-.69-3.06-3.26-1.9-5.07,2.29-10,5-15.21,6.83-6.91,2.36-13.46,1.5-18.69-4.34-2.44-2.73-2.82-7.73-.36-10.33a5.06,5.06,0,0,1,3.62-1.44,2.45,2.45,0,0,1-.12,4.85c-2.34,0-2.17,1.41-2.08,2.8,0.22,3.33,3,5.72,6.82,6.08,4.94,0.47,9.38-1.25,13.66-3.28,4.58-2.17,9-4.74,13.49-7a4.62,4.62,0,0,0,2.55-4c1.18-7.78,3.78-15,9-21,3.62-4.16,7.94-6.48,13.6-5.78,2.67,0.33,4.08,1.51,4.45,4.21,0.71,5.2-1.53,9.43-4.86,13.12-2.72,3-5.77,5.74-8.5,8.76a5.68,5.68,0,0,0-1.36,3.51,81.09,81.09,0,0,0,3,20.16c2.84,10.84,5.54,21.73,4.93,33.16-0.42,7.94-3.22,14.47-9.33,19.63S307.15,461.38,298.7,460.71Zm34.43-105.55c-5.8,1.22-11,9.31-9.88,15.09C327.22,365.56,331.11,361.33,333.13,355.16Z" transform="translate(-12.27 -345.86)"/>
<path d="M444.5,374.14c1.48,0.25,2.72.37,3.92,0.69,3,0.81,3.24,2,3,5.05-0.27,3.54-2.65,5.4-4.77,7.46s-9.5.88-11.12-1.34a2.73,2.73,0,0,1-.58-2c1.19-3.46,2.54-6.92,5.92-8.88A13.26,13.26,0,0,1,444.5,374.14Z" transform="translate(-12.27 -345.86)"/>
</clippath>
</svg>
And the scss as follows;
.word {
#extend %textured-background;
width: 50%;
height:500px;
clip-path: url(#clipPath);
}
The problem is that this does not scale the SVG clipping path. As i did some research, i found that the clipPath should have the clipPathUnits="objectBoundingBox" value. However, as soon as this is applied, everything disappears from the screen.
I think this has something to do with unit values being between 0 and 1. The problem is that this SVG is complex, exported from illustrator.
Any guidance here is much appreciated.
As you have already figured out, you need to convert your path coordinates so that they are in the range 0 to 1. Assuming your clip path is the size of your viewBox (550.6 x 144.52), then you need to scale your X coords by (1/550.6) and your Y coords by (1/144.52). So try wrapping your paths in a group that has the appropriate scaling transform applied: <clippath id="clipPath"> <g transform="scale(0.00182 0.00692)"> <path ... /> <path ... /> <path ... /> <path ... /> </g> </clippath> Update / correction I forgot. Groups aren't allowed in clipPaths. You will need to add the transform to each path. <clippath id="clipPath"> <path ... transform="scale(0.00182 0.00692) "/> <path ... transform="scale(0.00182 0.00692)" /> <path ... transform="scale(0.00182 0.00692)" /> <path ... transform="scale(0.00182 0.00692)" /> </clippath> If the path already contains a transform, then make sure you put the scale before the rest of the transform. <clippath id="clipPath"> <path ... transform="scale(0.00182 0.00692) translate(-12.27 -345.86)"/> etc </clippath>