I'm looking to change position of a few created SVG shapes with CSS. I've had no trouble positioning them from the beginning, and I've been able to re-position other objects like rectangles and circles with CSS. But I can't figure out how to do it with a path. I've done searches both here and through Google search for several hours, but haven't found any usable clues. I'm beginning to suspect that there is something about SVG paths I haven't understood fully yet, but at the same time I can't help but think that it might just be down to me not understanding the correct syntax in CSS.
Below is an SVG elliptical arc path I've created. I'd like to move it anywhere within view (so I can spot the difference and work from there). Can someone tell me if I'm lacking some knowledge about how paths work (contrary to how rectangles work in this regard), or if I just need the proper syntax in CSS?
Please note: I do NOT want to animate it in any way, just move it to a new position if possible.
<svg xmlns="http://www.w3.org/2000/svg">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue" stroke="blue" stroke-width="1" stroke-miterlimit="5"/>
</svg>
You can move the path using transform/translate either as a CSS property (first example) or as an attribute (second example).
I also added the viewBox attribute to the SVG element -- then it's easier to see where you place the path in the SVG.
svg {
background: orange;
}
path {
transform: translate(10px, 10px);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 20">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue"
stroke="blue" stroke-width="1" stroke-miterlimit="5"/>
</svg>
svg {
background: orange;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 20">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue"
stroke="blue" stroke-width="1" stroke-miterlimit="5" transform="translate(10 10)" />
</svg>
The capital A in your path M 0 0 A 50 37.5 0 0 1 50 0 makes it Arc at an absolute position
If you convert that whole path to use a relative a position: M0 0 a 50 37.5 0 0 1 50 0
(use https://yqnn.github.io/svg-path-editor/# for more complex paths)
You can use the first M x y notation to position the path anywhere in the viewBox
<style>
svg { background:hotpink; height:50px }
path { fill:lightblue; stroke:blue }
</style>
<svg viewBox="0 0 55 10">
<path d="M 0 7 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 14 7 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 4 9 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 4 12 a 50 37.5 0 0 1 50 0" />
</svg>
I finally got on track with 'offset-path', and with some tinkering I managed to understand enough about how it works to move the path to a new position:
offset-path: path("M237.5 50");
I want this svg to be 69px width and height. But it's not scaling or I don't understand viewbox.
picture is here
I understand that width and height applies to rect, path etc and viewbox is the canvas in which the svg is inside.
AS you can see from the code snippet below. The svg is 69px, but the logo inside sticks to the top left corner, but I want it to be as wide an tall as possible: 69px
<svg width="69" height="69" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4415 6.28449C10.4415 7.10822 10.4463 7.93207 10.4381 8.75576C10.4361 8.95977 10.5112 9.03203 10.713 9.02471C11.0684 9.01173 11.4277 9.0434 11.7797 9.00514C12.7047 8.90464 13.4368 8.49129 13.8053 7.60841C14.1704 6.73343 14.1651 5.83436 13.8403 4.94898C13.5425 4.1373 12.8973 3.74903 12.0656 3.6199C11.6197 3.55068 11.1704 3.58806 10.7227 3.58223C10.4551 3.57876 10.4422 3.59445 10.4418 3.85541C10.4407 4.6651 10.4414 5.47479 10.4415 6.28449ZM5.98329 6.20077C5.98329 4.89727 5.98184 3.59381 5.98462 2.29031C5.98513 2.06529 6.00176 1.84022 6.01377 1.61529C6.05083 0.922079 6.61303 0.369839 7.27299 0.263374C7.46967 0.23162 7.66715 0.213693 7.86776 0.214073C9.54884 0.216906 11.2301 0.20215 12.911 0.219655C14.2466 0.233565 15.4895 0.594481 16.5741 1.3772C17.6351 2.14283 18.2553 3.20655 18.4851 4.47521C18.7648 6.01934 18.7748 7.55987 18.2195 9.0582C17.6923 10.4806 16.6843 11.4255 15.2541 11.9599C14.3371 12.3026 13.3866 12.3915 12.4238 12.4004C10.9636 12.4138 9.50323 12.408 8.04298 12.4028C7.47219 12.4007 6.95239 12.2657 6.52485 11.8465C6.11906 11.4488 5.97962 10.9621 5.97598 10.4283C5.96645 9.01918 5.97274 7.60993 5.97274 6.20077H5.98329Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.62759 7.66138C4.57612 8.67961 4.61447 9.66663 4.57702 10.6511C4.53697 11.7049 3.84084 12.5047 2.67921 12.5854C2.10363 12.6254 1.54002 12.6071 1.01745 12.3268C0.417807 12.005 0.115548 11.4857 0.0332615 10.8337C-0.0233346 10.3855 0.0103495 9.93313 0.00808393 9.48266C0.00295437 8.47551 0.00739998 7.46837 2.34042e-05 6.46122C-0.00136301 6.26698 0.0585673 6.15704 0.254303 6.0836C1.23221 5.71668 2.20494 5.33615 3.17828 4.9573C3.56209 4.80792 3.94194 4.64865 4.32499 4.49732C4.60865 4.38519 4.62703 4.39787 4.62729 4.69385C4.62806 5.69398 4.62759 6.69406 4.62759 7.66138Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.0324214 3.16745C0.0566586 2.70299 -0.0246875 2.12373 0.113853 1.55369C0.343614 0.608484 1.10364 0.0115526 2.08552 0.000855396C2.5353 -0.00404927 2.97858 0.00707082 3.40737 0.172054C4.10045 0.438639 4.6214 1.16368 4.63196 1.90255C4.63538 2.14191 4.61777 2.38254 4.63705 2.62041C4.6553 2.84581 4.56994 2.95562 4.35638 3.03722C3.11665 3.51082 1.88252 3.99879 0.646386 4.4816C0.50092 4.53843 0.352762 4.58887 0.209434 4.65044C0.0699954 4.71035 0.0308826 4.65496 0.0316092 4.52393C0.0338321 4.10851 0.0324214 3.6931 0.0324214 3.16745Z" fill="black"/>
</svg>
My suggestion is to use an external editor (like https://jakearchibald.github.io/svgomg/), as there would be too many changes to be made within path and d.
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 69 69" style="enable-background:new 0 0 69 69;width: 69px;height: 69px;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;}
</style>
<path class="st0" d="M38.6,34.4c0,3,0,6.1,0,9.1c0,0.8,0.3,1,1,1c1.3,0,2.6,0.1,3.9-0.1c3.4-0.4,6.1-1.9,7.5-5.2
c1.3-3.2,1.3-6.6,0.1-9.8c-1.1-3-3.5-4.4-6.6-4.9c-1.6-0.3-3.3-0.1-5-0.1c-1,0-1,0-1,1C38.6,28.5,38.6,31.4,38.6,34.4z M22.1,34.1
c0-4.8,0-9.6,0-14.4c0-0.8,0.1-1.7,0.1-2.5c0.1-2.6,2.2-4.6,4.7-5c0.7-0.1,1.5-0.2,2.2-0.2c6.2,0,12.4,0,18.6,0
c4.9,0.1,9.5,1.4,13.5,4.3c3.9,2.8,6.2,6.8,7.1,11.4c1,5.7,1.1,11.4-1,16.9c-1.9,5.3-5.7,8.7-11,10.7C53,56.7,49.5,57,45.9,57
c-5.4,0-10.8,0-16.2,0c-2.1,0-4-0.5-5.6-2.1c-1.5-1.5-2-3.3-2-5.2C22,44.5,22.1,39.3,22.1,34.1L22.1,34.1z"/>
<path class="st0" d="M17.1,39.5c-0.2,3.8,0,7.4-0.2,11c-0.1,3.9-2.7,6.8-7,7.1c-2.1,0.1-4.2,0.1-6.1-1c-2.2-1.2-3.3-3.1-3.6-5.5
c-0.2-1.7-0.1-3.3-0.1-5c0-3.7,0-7.4,0-11.2c0-0.7,0.2-1.1,0.9-1.4c3.6-1.4,7.2-2.8,10.8-4.2c1.4-0.6,2.8-1.1,4.2-1.7
c1-0.4,1.1-0.4,1.1,0.7C17.1,32.3,17.1,36,17.1,39.5z"/>
<path class="st0" d="M0.1,22.9c0.1-1.7-0.2-3.9,0.3-6c0.8-3.5,3.7-5.7,7.3-5.7c1.7,0,3.3,0,4.9,0.6c2.6,1,4.5,3.7,4.5,6.4
c0,0.9-0.1,1.8,0,2.7c0.1,0.8-0.2,1.2-1,1.5C11.5,24.2,7,26,2.4,27.8c-0.5,0.2-1.1,0.4-1.6,0.6c-0.5,0.2-0.7,0-0.7-0.5
C0.1,26.4,0.1,24.9,0.1,22.9z"/>
</svg>
Basically the changes to width and height (to 68px) only apply to the canvas but the content is inside path so you should, point by point, move the image.
It is doable but it is hard work, I prefer to help myself with external editors.
i was having issues with svg scaling also recently. What i found helpful was this post by css-tricks. I will attach the link here: https://css-tricks.com/scale-svg/
i hope this brings more clarity to your issue :)
edit: playing around with the svg you provided i changed the aspect ratio and viewbox to fit in the svg (making it 'scale' to the wanted width, with reduced height in order to preserve its aspect ratio without distorting or cutting the svg).
here is what i changed:
<svg width="69" height="49" viewBox="0 -2 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
https://digitalpro.liquid-themes.com/
I'm trying to make the motion picture that we see as ss. I did the same but it's not moving
To achieve the desired effect of a smooth change in the contour of the cropping image, you will need:
#1. Create Primary Image Clipping Path
#2. Use this path as a mask to crop the image
#3. Animate the "d" path attribute that creates the clipping path
#1. Create Primary Image Clipping Path
To do this, you need to load the image into a vector editor and apply node points along the cropping path.
Use the handles to control the node points to match the shape of the curve with the desired trim contour
Save the *.svg file in the vector editor and copy the path to another file for animation.
#2. Use this path as a mask to crop the image
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="85%" height="85%" viewBox="0 0 912 816" preserveAspectRatio="xMinYMin meet">
<defs>
<mask id="msk">
<path fill="white" d="M83.1 149.8C114.7 69 199.8 53 260.4 47c77-7.7 424.8-2.7 509.7 56.2C932.8 216.2 896.8 353 846 465.2 779.5 611.7 647.2 699 506.1 746.3c-122.6 41.1-329.8 40.8-392.4-13.4C-33.4 605.4 20 311.2 83 149.8Z" />
</mask>
</defs>
<image mask="url(#msk)" xlink:href="https://i.stack.imgur.com/LwMcO.jpg" width="100%" height="100%"/>
</svg>
#3. Animate the "d" path attribute that creates the clipping path
To do this, you need to create a few more clipping paths, each of which will correspond to the new shape of the cropped image.
Write an animation formula for the "d" attribute, where for each transformation of the image shape there is its own path.
.container {
width:75vw;
height:75vh;
}
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 912 816" preserveAspectRatio="xMinYMin meet">
<defs>
<mask id="msk">
<path fill="white" d="M83.1 149.8C114.7 69 199.8 53 260.4 47c77-7.7 424.8-2.7 509.7 56.2C932.8 216.2 896.8 353 846 465.2 779.5 611.7 647.2 699 506.1 746.3c-122.6 41.1-329.8 40.8-392.4-13.4C-33.4 605.4 20 311.2 83 149.8Z" >
<animate
attributeName="d"
begin="0.5s"
dur="6s"
fill="freeze"
repeatCount="30"
restart="whenNotActive"
values="
M83.1 149.8C114.7 69 199.8 53 260.4 47c77-7.7 424.8-2.7 509.7 56.2C932.8 216.2 896.8 353 846 465.2 779.5 611.7 647.2 699 506.1 746.3c-122.6 41.1-329.8 40.8-392.4-13.4C-33.4 605.4 20 311.2 83 149.8Z;
M86.8 187.7c31.6-80.8 164.4-128.4 225-134.5 77-7.7 319.6 36.4 404.6 95.3 162.6 112.9 61.8 352.5-30.6 434-98.2 86.6-154.8 42-295.8 89.3-122.6 41-191.7 20-254.3-34.3-147.1-127.4-112-288.4-49-449.8Z;
M67.2 355.1c18.2-139.4 295-295.5 390-280 234.3 38.6 288-95.5 372.8-36.6 162.7 112.9-60.3 396.5-152.8 478-98.2 86.6-127.8 203.3-268.9 250.6-122.6 41.1-194.1 13.9-256.7-40.3C4.5 599.3 44.9 527 67.2 355Z;
M83.1 149.8C114.7 69 199.8 53 260.4 47c77-7.7 424.8-2.7 509.7 56.2C932.8 216.2 896.8 353 846 465.2 779.5 611.7 647.2 699 506.1 746.3c-122.6 41.1-329.8 40.8-392.4-13.4C-33.4 605.4 20 311.2 83 149.8Z"
/>
</path>
</mask>
</defs>
<image mask="url(#msk)" xlink:href="https://i.stack.imgur.com/LwMcO.jpg" width="100%" height="100%"/>
</svg>
</div>
I'm trying to make the top edge of a website footer wavvy by using a svg.
My svg:
<svg id="footer_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1335 190.97">
<path class="cls-2" d="M924.04,146.21c-76.43,5.57-72.82,6.94-181.21,15.68-101.37,8.17-186.53,15.03-294.66,19.39-127.28,5.13-225.98,4.36-297.61,3.71-44.28-.4-94.82-1.28-150.55-3v10.98H1335v-63.26c-40.08,.65-76.99,1.52-110.4,2.47-84.89,2.41-179.64,5.22-300.56,14.03Z"></path>
</svg>
For some reason, the svg ends up with height=272.22px but the path height=90.17px.
I can't see any css settings that interferes with anything here.
Here's the result I'm getting:
I want to get rid of this extra white space:
.
Can anyone advise please?
NB: I'm not very experienced and have rarely used svgs before so it's very possible I've left something out or I've overlooked something. I've already tried looking this up but couldn't come up with a solution. All I can find is in relation to making the path the same height as the svg element but I want to achieve the opposite.
Many thanks!
The width and en height of the viewbox should match the size of the elements in the SVG. Your path has a height of 63.26, so here I moved up the path shape and made the height of the viewbox 63.26.
<svg id="footer_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1335 63.26">
<path class="cls-2" d="M 924.04 16.5 c -76.43 5.57 -72.82 6.94 -181.21 15.68 c -101.37 8.17 -186.53 15.03 -294.66 19.39 c -127.28 5.13 -225.98 4.36 -297.61 3.71 c -44.28 -0.4 -94.82 -1.28 -150.55 -3 v 10.98 H 1335 v -63.26 c -40.08 0.65 -76.99 1.52 -110.4 2.47 c -84.89 2.41 -179.64 5.22 -300.56 14.03 Z"></path>
</svg>
Use preserveAspectRatio="none":
svg {
width: 500px;
height: 50px;
}
<svg viewBox='0 0 100 100' preserveAspectRatio="none">
<path d="M 0,80 C 50,120 50,-50 100,20 V 100 H 0 Z" fill='lightblue' />
</svg>
As you can see the image has three parts: the marker, the circle and the icon:
<svg width="58" height="66.667" fill="none" xmlns="http://www.w3.org/2000/svg" style="background-color:#eee">
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.434 56.755C49.337 53.142 58 42.082 58 29 58 12.984 45.016 0 29 0S0 12.984 0 29c0 13.083 8.663 24.142 20.566 27.755l6.834 9.112a2 2 0 0 0 3.2 0z" fill="#fff"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M29 55c14.36 0 26-11.64 26-26S43.36 3 29 3 3 14.64 3 29s11.64 26 26 26z" fill="#000000"/>
<path d="M11 9H9V2H7v7H5V2H3v7c0 2.12 1.66 3.84 3.75 3.97V22h2.5v-9.03C11.34 12.84 13 11.12 13 9V2h-2v7zm5-3v8h2.5v8H21V2c-2.76 0-5 2.24-5 4z" fill="#ffffff"/>
</svg>
The icon is not centered.
Anyone know how to reorder all of this?
I don't get your question well,you want to align the images inside the image or align it to the center of your html?
If you want to align to the center of your html webpage, you can use this
transform: translate((x-axis)px,((y-axis)px); on your CSS,for example transform: translate(300px,50px);
If you want to align the items inside another image, you need to set your main-svg as position:relative and place your other svg position:absolute and you can adjust the position much easier.
Well,Hope it helps, you might have better solution from others, I've just picked up html and CSS weeks ago.