How can I change my SVG path to the specification below?-CodePudding

How can I change my SVG path to width: 7.58 and height: 16.62. (7.58x16.62)?

My SVG icon is 19x19px but I'm looking to change the SVG PATH to width: 7.58 and height: 16.62.

svg {
  border: 1px solid black;
  width: 19px;
  height: 19px;
}

div {
  margin-left: 10px;
  width: 170px;
  height: 170px;
}

<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M1.01099 5.36841L8.42124 12.5263L16.2215 5.36841" stroke="#111111" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Currently my SVG path size is 15.21x7.16 and I need to make the svg path size width: 7.58 and height: 16.62.

![jsfiddle svg path incorrect should be the other way around, with the correct values][1]

https://i.stack.imgur.com/1InxN.png

CodePudding user response：

The svg path definition d uses coordinates to plot a path. For a path made of straight line segments, the coordinates are preceeded with an instruction letter (M or m, L or l) with capitals denoting that absolute coordinates follow (small letters indicate relative coordinates). M denotes "move to", L denotes "(draw) line to".

So the coordinates of the line must lie within the bounds of the width and height distances (assuming the viewbox is set to the same width and height as the image).

I've approximated to your svg in the working snippet here. (it's blown up by fitting it 100% to a sized container but will render to 17x17 without the container or css width set). I've used rounded numbers to simplify the path.

If you're constructing the path yourself, always use spaces. They're allowed and they make it easier to see what you've done. The pattern is:

d="M x y L x y L x y"

You can plot simple images on squared paper and read coordinates.

svg {
  border: 1px solid black;
  width: 100%;
  height: 100%;
}

div {
  display: inline-block;
  margin-left: 10px;
  width: 170px;
  height: 170px;
}

<div>
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M 1 5 L 8 13 L 16 5" stroke="#111111" stroke-linecap="round" stroke-linejoin="round"/> </svg>
</div>

Lastly, bear in mind lines widths are calculated from the centre of the coordinate they meet, so allow at least 0.5 line width on top of the maximum coordinate in both directions.

CodePudding user response：

You cannot directly control the size of an SVG path as it is dictated by the boundaries of the path itself. What you can do is scale the path to achieve the desired size:

scale x factor: 7.58 / 15.21 = 0.4983563445101907

scale y factor: 16.62 / 7.16 = 2.32122905027933

svg path {
    transform: scale(0.4984, 2.3212)
}