相关疑难解决方法(0)

我们有一个起点(x,y)和一个圆半径.还存在可以从贝塞尔曲线点创建路径的引擎.

如何使用Bézier曲线创建圆？

我有一组坐标,我变成了svg路径(使用立方贝塞尔曲线使其平滑).当我应用一定的笔画宽度时,我得到以下结果(蓝点是我的坐标)

我感兴趣的是获得一条围绕灰色形状的路径(例如:选择灰色/白色边框上的任何点,并围绕形状进行环绕,直到您回到起点).

我将如何计算这样的路径？

供参考,这是我的svg信息:

 <g>
  <title>number 3</title>
  <path d="m238,50c5.67569,-1.01351 11.8327,-3.8229 20.92029,-2.14724c8.68106,0.69732 14.21173,4.90255 18.07971,7.14724c6.23697,3.61945 13.47556,9.5931 15,18c1.07056,5.90372 1.17343,10.97649 -4,16c-6.76816,6.57204 -19.45392,9.57738 -25.69687,10.59046c-3.94836,0.64074 4.73492,3.29883 10.69687,5.40954c8.05417,2.85142 15,8 21,14c6,6 5.26578,10.94739 5.26578,17.03015c-2.4541,7.30975 -4.23343,11.08675 -11.26578,12.96985c-3.98279,1.0665 -11.92578,3.49756 -17,4c-8.95618,0.88684 -15.80411,2.97838 -26,0l-9.19197,-3.44464" id="svg_1" opacity="0.5" stroke-width="10" stroke-linejoin="round" stroke="#000000" fill="none"/>
 </g>

是否可以在 SVG 中对矩形进行圆化处理，同时确保笔划遵循角的圆度？下面的代码不起作用。

无中风：

stroke-width="0px"

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" stroke="red" stroke-width="0px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>

有中风：

stroke-width="10px"

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" stroke="red" stroke-width="10px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>

笔画似乎遵循原来的尖角而不是圆角。

考虑 2 个 html svg 路径，一个正方形（类inside）和一个outside具有相同高度的矩形（类）。当我应用时stroke-width: 10px，笔触会5px在内部和5px外部应用。小提琴

我如何只在里面或只在外面抚摸？

.inside { 
  stroke: #333;
  stroke-mode: inside;     // property does not exist
  stroke-width: 5px;
}

.outside {
   stroke: #333;
   stroke-mode: outside;   // property does not exist
   stroke-width: 5px;
}

如果没有这样的属性，是否有解决方法来实现以下目标：

SVG 中有没有可以在元素stroke 内部制作的选项？

#html-cup {
  stroke: #f00;
  stroke-opacity: 0.5;
  stroke-width: 4px;
  fill: #666666;
}

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg viewBox="0 0 245 123" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <path d="M66.84,122.57 C50.67,122.59 34.5,122.57 18.34,122.59 C12.72,89.4 7.15,56.2 1.53,23.01 C28.9,23 56.26,22.98 83.63,23.02 C83.63,23.02 72.5,89.4 66.84,122.57 Z M23.1,52.01 C36.09,51.99 49.09,52 62.08,52 C60.94,65.26 59.68,78.51 58.54,91.78 C53.32,93.17 48.19,94.97 42.88,96.02 C37.33,95.22 32.05,93.15 26.62,91.77 C25.52,78.51 24.28,65.26 23.1,52.01 Z M30.14,60.03 C38.44,59.97 46.75,60.01 55.06,60 C54.92,61.66 54.77,63.33 54.62,65 L35.77,65 C35.93,66.58 36.07,68.15 36.22,69.73 C42.22,69.77 48.21,69.75 54.21,69.75 …

当我将SVG和CSS属性放在一个文件中时:

.circle {
    stroke: red;
}

.myArea {
    width: 100%;
}

有用.但根据W3C它是否有效？此代码未通过CSS验证器的验证测试,我找不到选项"CSS + SVG"...