主页 / 问题 / 1110535
Accepted
webphp
Asked:2020-04-15 13:47:42 +0800 CST2020-04-15 13:47:42 +0800 CST

字母S怎么画？

  • 772

我有一个带有背景的图标，我需要在其中绘制字母S。
我正在尝试自己做，但它是弯曲的=）

<?xml version="1.0" encoding="iso-8859-1"?>
    <svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32">
        <path d="M2 0h28a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z" fill="#333"></path>
    </svg>

在此处输入图像描述

svg

2 个回答

  1. Best Answer

    无编辑器：2 条二次曲线和 2 条三次贝塞尔曲线

    <svg width="175px" height="175px" viewBox="0 0 16 16">
  <path fill="none" stroke="#333" stroke-width="2" d="
    m 3 10
    c 0 4 8 4 8 0
    q 0 -2 -4 -3 
    q -4 -1 -4 -3 
    c 0 -4 8 -4 8 0
    "></path>
</svg>

    一点视觉澄清：

    <svg width="175px" height="175px" viewBox="0 0 16 16">
  <path fill="none" stroke="#333" stroke-width="2" d=" m 3 10 c 0 4 8 4 8 0 q 0 -2 -4 -3 q -4 -1 -4 -3  c 0 -4 8 -4 8 0 "></path>
  <path stroke="red" stroke-width="0.2" fill='none' d="m 3 10 0 4 8 0 0 -4 "></path> 
  <path stroke="blue" stroke-width="0.2" fill='none' d=" m 11 10 0 -2 -4 -1 "></path> 
  <circle cx=3 cy=10 r=0.5 fill='cyan' />
  <circle cx=11 cy=10 r=0.5 fill='cyan' />
  <circle cx=7 cy=7 r=0.5 fill='cyan' />
  <circle cx=3 cy=14 r=0.5 fill='green' />
  <circle cx=11 cy=14 r=0.5 fill='green' />
  <circle cx=11 cy=8 r=0.5 fill='green' />
</svg>

    PS：3条三次曲线：

    <svg width="175px" height="175px" viewBox="0 0 16 16">
  <path fill="none" stroke="#333" stroke-width="2" d="
    m 3 10
    c 0 4 8 4 8 0
    c 0 -4 -8 -2 -8 -6 
    c 0 -4 8 -4 8 0
    "></path>
</svg>

    • 6

  2. 这个答案是针对刚接触 SVG 的人。

    很明显，具有一定 SVG 知识水平且允许您手动编写贝塞尔曲线公式的人不会有这样的问题：

    字母S怎么画？

    因此，让我们从最简单的开始，如何使用矢量编辑器来获取path任何字母甚至整个单词的轮廓。

    步骤1。

    将问题中的文件加载到矢量编辑器中，比如 Inkscape

    第2步

    从工具栏中选择Создавать и править текстовые объекты

    第 3 步

    输入符号S并选择字体-在本例Arial中，字体大小为 32px 。

    第4步

    选择- контур / оконтурить（下图中红色箭头2）

    在此处输入图像描述

    第 5 步

    保存文件并复制path

    为了清楚起见，如图所示width="320" height="320"

    <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="320" height="320" viewBox="0 0 32 32" version="1.1">
  <path d="M2 0h28a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z" fill="#333"/>
  <g transform="matrix(0.97490305,0,0,0.9227226,0.37033357,1.2847719)" >
   <path fill="#ffffff" d="m4 21.6c1.3-0.1 2.5-0.2 3.8-0.3 0.2 2.3 1.3 4.6 3.4 5.7 3 1.7 6.8 1.8 10 0.6 2.1-0.7 3.7-3 3.2-5.3C23.9 20.1 21.7 19 19.7 18.5 16.1 17.4 12.3 17 8.9 15.2 6.5 13.9 4.9 11.3 5.1 8.5 5.2 5.2 7.6 2.3 10.7 1.3 14.2 0 18.2 0.1 21.7 1.4 24.7 2.5 27 5.5 27.3 8.7 27.7 9.6 26.9 9.6 26.2 9.6 25.3 9.7 24.4 9.7 23.5 9.8 23.3 7.4 21.8 5.1 19.4 4.4 17.1 3.8 14.5 3.8 12.2 4.5 10.1 5.1 8.4 7.5 9.2 9.7 9.8 11.7 12 12.3 13.8 12.8c3.5 1.1 7.4 1.4 10.6 3.3 2.5 1.5 4.1 4.4 3.8 7.3-0.2 3.5-2.8 6.5-6.1 7.6C18.8 32.3 15 32.2 11.5 31.3 8.1 30.4 5.2 27.7 4.3 24.2 4.1 23.4 4 22.5 4 21.6Z"/>
  </g>
</svg>

    图标模式下的工作尺寸width="32" height="32" 

    <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" version="1.1">
  <path d="M2 0h28a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z" fill="#333"/>
  <g transform="matrix(0.97490305,0,0,0.9227226,0.37033357,1.2847719)" >
   
   <path fill="#ffffff" d="m4 21.6c1.3-0.1 2.5-0.2 3.8-0.3 0.2 2.3 1.3 4.6 3.4 5.7 3 1.7 6.8 1.8 10 0.6 2.1-0.7 3.7-3 3.2-5.3C23.9 20.1 21.7 19 19.7 18.5 16.1 17.4 12.3 17 8.9 15.2 6.5 13.9 4.9 11.3 5.1 8.5 5.2 5.2 7.6 2.3 10.7 1.3 14.2 0 18.2 0.1 21.7 1.4 24.7 2.5 27 5.5 27.3 8.7 27.7 9.6 26.9 9.6 26.2 9.6 25.3 9.7 24.4 9.7 23.5 9.8 23.3 7.4 21.8 5.1 19.4 4.4 17.1 3.8 14.5 3.8 12.2 4.5 10.1 5.1 8.4 7.5 9.2 9.7 9.8 11.7 12 12.3 13.8 12.8c3.5 1.1 7.4 1.4 10.6 3.3 2.5 1.5 4.1 4.4 3.8 7.3-0.2 3.5-2.8 6.5-6.1 7.6C18.8 32.3 15 32.2 11.5 31.3 8.1 30.4 5.2 27.7 4.3 24.2 4.1 23.4 4 22.5 4 21.6Z"/>
  </g>
</svg>

    • 5

相关问题