I'm trying to resize an svg element using css by setting width and height to a smaller value than the inline one, but it is not scaling, the end result is an empty square, the thing is that the <svg> element itself changes sizes, but the <path>'s inside it do not, this is shown by inspecting them in the browser's devtools.
The svg element is imported as a react component using SVGR, the styling is set using styled-components.
Before writing this post I read some possible solutions online, none worked (removing inline width and height, adding viewbox to same values as width and height etc...), any clue?
<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
<title/>
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
</g>
<g>
<title>Layer 1</title>
<path id="svg_1" fill="#fff133" d="m276.6,127.6a148.4,148.4 0 0 0 -114.46,242.86a148.49,148.49 0 0 0 164.33,16.54a150.66,150.66 0 0 1 -15.94,-16.51a148.38,148.38 0 0 1 9.79,-236.29a148.18,148.18 0 0 0 -43.72,-6.6z"/>
<path id="svg_2" stroke-width="20" stroke-linejoin="round" stroke-linecap="round" stroke="#455a64" fill="none" d="m116.5,207c-0.37,1.05 -0.73,2.11 -1.07,3.17"/>
<path id="svg_3" stroke-width="20" stroke-linejoin="round" stroke-linecap="round" stroke="#455a64" fill="none" d="m109.77,234.43a148.43,148.43 0 0 0 221,150.11a148.44,148.44 0 0 1 0,-257.08a148.46,148.46 0 0 0 -204,56.62"/>
</g>
</svg>
What I'm trying to do is remove the svg lines in the middle of the circle.
How would this be done using clip-path?
Taking this:
https://i.imgur.com/DGX3Yji.png
And turning it to this:
https://i.imgur.com/gg4XFUq.png
Code:
https://jsfiddle.net/5r1dg4hx/3/
https://i.imgur.com/SGzGzaE.png
<svg class="stack" aria-hidden="true" width="260" height="194" viewbox="0 0 260 194">
<line stroke="teal" x1="131" y1="40" x2="130" y2="149"></line>
<line stroke="dodgerblue" x1="91" y1="133" x2="170" y2="58"></line>
<line stroke="purple" x1="77" y1="95" x2="185" y2="96"></line>
<line stroke="green" x1="169" y1="135" x2="93" y2="56"></line>
<circle class="outer" cx="131" cy="95" r="55"></circle>
<circle cx="130" cy="95.40" r="20.8"></circle>
You will need to draw a path with a hole for the clipping path:
<path d="M0,0 0,194 260,194 260,0 0,0
M150.8, 95.40A20.8, 20.8 0 0 1 109.2 95.40A20.8, 20.8 0 0 1 150.8, 95.40" />
The first part of the path (M0,0 0,194 260,194 260,0 0,0) is drawing a rectangle as big as the svg canvas. The second part (M150.8, 95.40A20.8, 20.8 0 0 1 109.2 95.40A20.8, 20.8 0 0 1 150.8, 95.40) is drawing a circle as big as the inner circle and in the same position.
Next you wrap the lines in a group and you clip the group.
svg{border:1px solid;}
circle{fill:none;stroke:black}
<svg class="stack" aria-hidden="true" width="260" height="194" viewbox="0 0 260 194">
<defs>
<clipPath id="clip">
<path d="M0,0 0,194
260,194 260,0 0,0 M150.8, 95.40A20.8, 20.8 0 0 1 109.2 95.40A20.8, 20.8 0 0 1 150.8, 95.40" />
</clipPath>
</defs>
<g clip-path="url(#clip)">
<line stroke="teal" x1="131" y1="40" x2="130" y2="149"></line>
<line stroke="dodgerblue" x1="91" y1="133" x2="170" y2="58"></line>
<line stroke="purple" x1="77" y1="95" x2="185" y2="96"></line>
<line stroke="green" x1="169" y1="135" x2="93" y2="56"></line>
</g>
<circle class="outer" cx="131" cy="95" r="55"></circle>
<circle cx="130" cy="95.40" r="20.8"></circle>
</svg>
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 an SVG that doesnt render on an iPhone 4 but appears to work fine on all other browsers. Im wondering if it could be the transform property not being supported?
<?xml version="1.0" encoding="UTF-8"?>
<svg width="38" height="38" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<title>Layer 1</title>
<use x="0.084832" y="-0.670279" transform="matrix(0.995734, 0, 0, 0.995734, -0.0756826, 1.1509)" xlink:href="#svg_2" id="svg_3"/>
<g id="svg_4"/>
</g>
<defs>
<symbol viewBox="0 0 40 40" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="svg_2">
<g id="svg_1">
<path d="m19.700001,11.2c-0.400002,-1.3 -0.6,-5 -1.6,-7.2c0,-0.1 0,-0.1 0,-0.2c-0.200001,-0.4 -0.4,-0.8 -0.800001,-1.1c0,0 0,0 0,0c-0.099998,-0.1 -0.199999,-0.1 -0.299999,-0.2c0,0 -0.1,0 -0.1,-0.1c0,0 0,0 -0.1,0c-0.299999,-0.1 -0.5,-0.2 -0.799999,-0.3c-1.6,-0.3 -3.1,0.7 -4.9,2c-1.700001,1.2 -3.8,1.8 -5.400001,2.1c-2.5,0.3 -3.7,0.6 -4.4,1c0,0 0,0 0,0c-0.2,0.1 -0.3,0.2 -0.4,0.3c0,0 0,0 -0.1,0c-0.1,0.1 -0.1,0.2 -0.2,0.3c-0.2,0.2 -0.3,0.4 -0.4,0.599999c0,0 0,0 0,0.1c-0.1,0.2 -0.2,0.5 -0.2,0.8c0,0.3 0,0.7 0.2,1c0,0 0,0.099999 0.1,0.099999c0.6,1.900001 2.5,4.3 3.4,6.200001c1.3,2.699999 2.1,4.5 3.1,5.4c0.9,0.799999 3.2,2.299999 6.4,4.4c3.599999,1.6 5.2,-0.9 5.500001,-2.199999c0.299999,-1.200001 1.299999,-4.700001 1.699999,-6.300001c0.4,-1.6 -0.199999,-5 -0.699999,-6.7l0,0zm-5.400001,-0.599999c0.5,-0.3 1.4,-0.5 2.3,-0.3c-0.200001,0.7 -0.6,1.4 -1.400001,1.9c-0.8,0.5 -1.3,0.400001 -2,0.1c0,-0.6 0.2,-1.2 1.1,-1.7l0,0zm-6.5,4.299999c-1,0.200001 -1.7,-0.099999 -2.3,-0.5c0.6,-0.7 1.4,-1.2 2,-1.299999c1,-0.200001 1.5,0.099999 1.9,0.599999c-0.4,0.6 -0.7,1 -1.599999,1.2l0,0zm6.8,7.1c-2.1,0.799999 -4.5,-0.200001 -5.200001,-2.299999c-0.099999,-0.200001 -0.099999,-0.400002 -0.2,-0.700001c1,1.6 3,2.299999 4.900001,1.6c1.9,-0.700001 3,-2.6 2.699999,-4.4c0.1,0.199999 0.200001,0.4 0.300001,0.599998c0.799999,2.1 -0.4,4.400002 -2.5,5.200001l0,0z" fill="#B39C0B" id="svg_5"/>
<path d="m40,21.6c0,-0.1 0,-0.200001 0,-0.300001c0,0 0,-0.099998 0,-0.099998c0,0 0,0 0,-0.1c-0.099998,-0.300001 -0.200001,-0.6 -0.400002,-0.800001c-0.799999,-1.299999 -2.599998,-1.799999 -4.799999,-2.199999c-2.099998,-0.4 -3.9,-1.6 -5.299999,-2.5c-1.9,-1.6 -2.9,-2.3 -3.700001,-2.5c0,0 0,0 0,0c-0.199999,0 -0.299999,-0.1 -0.5,-0.1c0,0 0,0 -0.099998,0c-0.1,0 -0.200001,0 -0.300001,0c-0.299999,0 -0.5,0.1 -0.699999,0.2c0,0 0,0 -0.1,0c-0.300001,0.1 -0.5,0.2 -0.700001,0.400001c-0.299999,0.2 -0.5,0.5 -0.6,0.799999c0,0 0,0.1 -0.099998,0.1c-1,1.799999 -1.400002,4.799999 -2.1,6.700001c-1,2.799999 -1.700001,4.599998 -1.700001,5.9c0,1.199999 0.5,3.9 1.200001,7.699999c1.299999,3.700012 4.199999,3.100002 5.4,2.5c1.1,-0.599991 4.299999,-2.299988 5.700001,-3.099991c1.5,-0.799999 3.5,-3.600008 4.399998,-5.100008c0.700001,-1.200001 3.200001,-3.9 4.200001,-6.099991c0,-0.1 0.100002,-0.1 0.100002,-0.20001c0,-0.29999 0.099998,-0.699999 0.099998,-1.199999c0,0 0,0 0,0l0,0zm-14.799999,-0.200001c0.9,0.4 1.299999,1.1 1.5,1.800001c-1,0.199999 -1.900002,0.099998 -2.300001,-0.200001c-0.9,-0.4 -1.1,-1 -1.1,-1.6c0.5,-0.299999 1,-0.4 1.900002,0l0,0zm3.599998,11.800001c-0.099998,0.200001 -0.199999,0.399998 -0.4,0.599998c0.6,-1.799999 -0.299999,-3.799999 -2.1,-4.799999c-1.799999,-0.9 -4,-0.4 -5.099998,1.1c0.099998,-0.200001 0.099998,-0.4 0.199999,-0.700001c1,-1.9 3.4,-2.699999 5.5,-1.699999c2,1.099998 2.9,3.5 1.9,5.5zm3.200001,-6.400002c-0.5,-0.199999 -1.200001,-0.799999 -1.700001,-1.599998c0.700001,-0.300001 1.400002,-0.400002 2.299999,-0.1s1.200001,0.799999 1.300003,1.5c-0.5,0.4 -1,0.6 -1.900002,0.199999l0,0z" fill="#B39C0B" id="svg_6"/>
</g>
</symbol>
</defs>
</svg>
Ive tried using all of these optimizers:
https://jakearchibald.github.io/svgomg/
http://petercollingridge.appspot.com/svg-editor
https://www.npmjs.com/package/gulp-svgmin
Im using spritesmith. When I view the generated sprite on an iPhone 4 most of the icons are there but my problem SVG is not visible.
https://www.npmjs.com/package/gulp-spritesmith
Here is my full sprite, funnily enough the dropbox viewer also doesn't render all of the icons. If you save the svg and open it in Chrome you will see all of them: https://www.dropbox.com/s/3o981ljy0cs9ued/sprite-d5c1601f.svg?dl=0
UPDATE - Saving the file with Illustrator fixes this issue however it would still be nice to have an automated solution or linting to provide a warning for future files.
Try moving the <defs> section before the <use>. IIRC older Safari/Webkit had a bug with forward references.
Ie. rearrange the file so the order of tags looks like this:
<svg>
<defs>
<symbol>
</defs>
<g>
<use>
</g>
</svg>