SVG成形-弯曲的边缘 [英] SVG Shaping - Curved Edges

问题描述

到目前为止，我的SVG按钮都具有这种形状，但是现在我被要求重新设计一下.我需要具有弯曲的边缘而不是获得的锐利边缘，并且它也需要更长的时间.对于已经完成的任务，我使用了一些弧线.到目前为止，我已经提供了设计图像以供参考，并提供了该按钮以前版本的代码.如何改善形状，使其看起来像新的设计图像?他们希望按钮与内部的绿色部分匹配，外部的粗边框正好在其中，因此形状更易于查看.

I have this shape for my SVG buttons so far, but now I have been given a request to redesign it a bit. I need to have curved edges instead of the sharp edges I achieved, and it needs to be longer as well. For the one I already made, I used some arcs and lines. I have provided the design image for reference along with the code I have for the previous version of the button so far. How can I refine the shape I have into looking like the new design image? They want the button to match the inner green part, the outer thick border is just there so the shape is easier to see.

HTML

<svg viewbox="0 0 100 20" class="bottom-nav-circle-button-2" width="100" height="100">
  <path d="M 100 0 A 100 50 0 0 0 29.2 29.2 L 57.58 57.58 A 60 60 0 0 1 100 40 Z"></path>
</svg>

示例图片:

推荐答案

对于圆边，请添加 stroke-linejoin ="round" 要使其变大，请参考我对其他问题的回答:如何在SVG中制作弯曲矩形"?即:您将不得不增加线段的角度.

For rounded edges pease add stroke-linejoin="round" To make it bigger please refer to my answer to your other question: How to make a "bent rectangle" in SVG? i.e: you will have to increase the angle for the segment.

<svg viewbox="0 -50 200 200" class="bottom-nav-circle-button-2" width="200" height="200">
  <path stroke="grey" stroke-width="10" stroke-linejoin="round" d="M 100 0 A 100 50 0 0 0 29.2 29.2 L 57.58 57.58 A 60 60 0 0 1 100 40 Z"></path>
</svg>

OP表示他/她需要将形状弄圆，并且笔触宽度只有1px.我正在更新我的答案.现在，形状的角成为了二次Bézier曲线的控制点.偏移角度为 a ，垂直偏移值为 o .我需要这些偏移量来定义贝塞尔曲线的起点和终点.

The OP is commenting that he/she needs the shape to be rounded and the stroke width to be only 1px. I'm updating my answer. Now the corners of the shape become control points for quadratic Bézier curves. The offset angle is a and the vertical offset is o. I need those offset to define the starting and ending points of the Beziers.

在注释中，您可能会找到原始形状和斜面形状的d属性.

In the comments you may find the d attribute for the original shape, and for a beveled one.

为了获得不同的舍入效果，您可以尝试更改角度和偏移量的值.

In order to get a different rounding effect you may try to change the values for the angles and for the offset.

const rad = Math.PI / 180;

let cx = 50, cy = 100, R = 50, r = 35, A = 40 , a = 5, o=4;
// o for offset
testG.setAttributeNS(null, "transform", `rotate(${-90 -(A / 2) - a} ${cx} ${cy})`)


// control points for the quadratic Bézier
let px1 = cx + R * Math.cos(0);
let py1 = cy + R * Math.sin(0);
let px2 = cx + R * Math.cos((2*a + A)*rad);
let py2 = cy + R * Math.sin((2*a + A)*rad);
let px3 = cx + r * Math.cos((2*a + A)*rad);
let py3 = cy + r * Math.sin((2*a + A)*rad);
let px4 = cx + r * Math.cos(0);
let py4 = cy + r * Math.sin(0);

// points used to draw the shape
let x11 = cx + (R-o) * Math.cos(0);
let y11 = cy + (R-o) * Math.sin(0);

let x1 = cx + R * Math.cos(a*rad);
let y1 = cy + R * Math.sin(a*rad);

let x2 = cx + R * Math.cos((a + A)*rad);
let y2 = cy + R * Math.sin((a + A)*rad);

let x21 = cx + (R-o) * Math.cos((2*a + A)*rad);
let y21 = cy + (R-o) * Math.sin((2*a + A)*rad);

let x31 = cx + (r+o) * Math.cos((2*a + A)*rad);
let y31 = cy + (r+o) * Math.sin((2*a + A)*rad);

let x3 = cx + r * Math.cos((a + A)*rad);
let y3 = cy + r * Math.sin((a + A)*rad);

let x4 = cx + r * Math.cos(a*rad);
let y4 = cy + r * Math.sin(a*rad);

let x41 = cx + (r+o) * Math.cos(0);
let y41 = cy + (r+o) * Math.sin(0);

/*
No rounded corners
let d = `M${x1},${y1} A${R},${R},0 0,1 ${x2},${y2}
         L${x3},${y3} A${r},${r},0 0,0 ${x4},${y4}
         L${x1},${y1}Z`;*/

/*
Beveled corners
let d = `M${x1},${y1} 
         A${R},${R},0 0,1 ${x2},${y2}
         L${x21},${y21} 
         L${x31},${y31}
         L${x3},${y3}
         A${r},${r},0 0,0 ${x4},${y4}
         L${x41},${y41}
         L${x11},${y11}
         L${x1},${y1}Z`;*/

// Rounded corners with quadratic Bézier curves
    d = `M${x1},${y1} 
         A${R},${R},0 0,1 ${x2},${y2}
         Q${px2},${py2} ${x21},${y21} 
         L${x31},${y31}
         Q${px3},${py3} ${x3},${y3}
         A${r},${r},0 0,0 ${x4},${y4}
         Q${px4},${py4} ${x41},${y41}
         L${x11},${y11}
         Q${px1},${py1} ${x1},${y1}Z`;

test.setAttributeNS(null,"d",d);

svg{border:1px solid; max-width:90vh; }

path{stroke:black; fill:none;}

<svg viewBox="0 40 100 40">
  <g id = "testG" >
    <path id="test"/>
  </g>
</svg>

这就是生成的SVG:

<svg viewBox="0 40 100 40">
  <g id="testG" transform="rotate(-115 50 100)">
    <path id="test" stroke="black" fill="none" d="M99.80973490458729,104.35778713738291 
         A50,50,0 0,1 85.35533905932738,135.35533905932738
         Q82.13938048432698,138.3022221559489 79.5682300455808,135.23804438347298 
         L75.06871677777504,129.87573328164015
         Q72.49756633902888,126.81155550916424 74.74873734152916,124.74873734152916
         A35,35,0 0,0 84.86681443321109,103.05045099616804
         Q85,100 89,100
         L96,100
         Q100,100 99.80973490458729,104.35778713738291Z"></path>
  </g>
</svg>

这篇关于SVG成形-弯曲的边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！