[xml] SVG 둥근 모서리

나는 오늘이 문제를 직접 겪었고 작은 JavaScript 함수를 작성하여 해결했습니다.

내가 말할 수있는 건,이 쉬운 SVG의 경로 요소를 제공하는 방법 모서리 둥근 없다 제외한 경우에만 (CSS)의 속성이 경우, 테두리를 둥글게해야하는 경우를 stroke, stroke-width그리고 대부분의 중요한 stroke-linejoin="round"완벽하게 충분하다.

그러나 필자의 경우 경로 개체를 사용 하여 다음과 같이 특정 색상으로 채워지고 테두리가 표시되지 않는 n 개의 모서리가있는 사용자 지정 모양을 만들었습니다 .

SVG 경로에 대한 좌표 배열을 취하고 완료된 경로 문자열을 반환 d하여 경로 html 요소 의 속성에 넣는 빠른 함수를 작성했습니다 . 결과 모양은 다음과 같습니다.

기능은 다음과 같습니다.

/**
 * Creates a coordinate path for the Path SVG element with rounded corners
 * @param pathCoords - An array of coordinates in the form [{x: Number, y: Number}, ...]
 */
function createRoundedPathString(pathCoords) {
    const path = [];
    const curveRadius = 3;

    // Reset indexes, so there are no gaps
    pathCoords = pathCoords.slice();

    for (let i = 0; i < pathCoords.length; i++) {

      // 1. Get current coord and the next two (startpoint, cornerpoint, endpoint) to calculate rounded curve
      const c2Index = ((i + 1) > pathCoords.length - 1) ? (i + 1) % pathCoords.length : i + 1;
      const c3Index = ((i + 2) > pathCoords.length - 1) ? (i + 2) % pathCoords.length : i + 2;

      const c1 = pathCoords[i];
      const c2 = pathCoords[c2Index],
      const c3 = pathCoords[c3Index];

      // 2. For each 3 coords, enter two new path commands: Line to start of curve, bezier curve around corner.

      // Calculate curvePoint c1 -> c2
      const c1c2Distance = Math.sqrt(Math.pow(c1.x - c2.x, 2) + Math.pow(c1.y - c2.y, 2));
      const c1c2DistanceRatio = (c1c2Distance - curveRadius) / c1c2Distance;
      const c1c2CurvePoint = [
        ((1 - c1c2DistanceRatio) * c1.x + c1c2DistanceRatio * c2.x).toFixed(1),
        ((1 - c1c2DistanceRatio) * c1.y + c1c2DistanceRatio * c2.y).toFixed(1)
      ];

      // Calculate curvePoint c2 -> c3
      const c2c3Distance = Math.sqrt(Math.pow(c2.x - c3.x, 2) + Math.pow(c2.y - c3.y, 2));
      const c2c3DistanceRatio = curveRadius / c2c3Distance;
      const c2c3CurvePoint = [
        ((1 - c2c3DistanceRatio) * c2.x + c2c3DistanceRatio * c3.x).toFixed(1),
        ((1 - c2c3DistanceRatio) * c2.y + c2c3DistanceRatio * c3.y).toFixed(1)
      ];

      // If at last coord of polygon, also save that as starting point
      if (i === pathCoords.length - 1) {
        path.unshift('M' + c2c3CurvePoint.join(','));
      }

      // Line to start of curve (L endcoord)
      path.push('L' + c1c2CurvePoint.join(','));
      // Bezier line around curve (Q controlcoord endcoord)
      path.push('Q' + c2.x + ',' + c2.y + ',' + c2c3CurvePoint.join(','));
    }
    // Logically connect path to starting point again (shouldn't be necessary as path ends there anyway, but seems cleaner)
    path.push('Z');

    return path.join(' ');
}

상단에 curveRadius 변수를 설정하여 반올림 강도를 결정할 수 있습니다 . 100×100 (뷰포트) 좌표계의 경우 기본값은 3이지만 SVG 크기에 따라이를 조정해야 할 수도 있습니다.