Question

一位朋友让我帮助他使用SVG，我已经尝试过了，但是......我有点卡住了。我正在尝试制作大写字母P，其外观为斜体（不使用字体）。

无论如何，我坚持的部分是在P（红色）上进行循环。这是我最接近我想要的东西：

<svg width="600" height="600">
    <path
        transform="rotate(-30.023731231689453 266.1240844726563,81.76864624023443)"
        d="m108.96828,81.76591
            l0,0
            c0,-76.2622 70.35745,-138.09057 157.15544,-138.09057
            l0,0
            c41.67737,0 81.65121,14.55039 111.12372,40.44496
            c29.4761,25.90185 46.03244,61.02362 46.03244,97.64561
            l0,0
            c0,76.26939 -70.36356,138.09602 -157.15616,138.09602
            l0,0
            c-86.79799,0 -157.15544,-61.82663 -157.15544,-138.09602
            z
            m78.5778,0
            l0,0
            c0,38.13795 35.17816,69.04613 78.57764,69.04613
            c43.39841,0 78.57697,-30.90818 78.57697,-69.04613
            c0,-38.13169 -35.17856,-69.04664 -78.57697,-69.04664
            l0,0
            c-43.39948,0 -78.57764,30.91494 -78.57764,69.04664
            z"
        fill="red"
        />
    <polyline
        points="0,300 100,300 300,0 200,0"
        fill="black"
        />
    <polyline
        points="150,225 250,225 300,150 200,150"
        fill="black"
        />
    <polyline
        points="300,0 400,0 350,75 250,75"
        fill="black"
        />
    <polyline
        points="0,75 300,75 300,100 0,100"
        fill="white"
        />
</svg>

但是我想要一半的圆圈（圆圈是在SVG编辑器中创建的，但我找不到一半的对象）。理想情况下，我希望圆圈的各个部分直接在字母的水平线段上开始/结束，但它当前布局的方式对我来说足够接近（尽管停止越过画布的顶部，而不是只是没有被人看到，这将是理想的。）

我意识到我可能会问很多，但任何人都可以帮助我吗？我甚至没有真正了解d path属性中每个元素的含义，而m是其中的来源。 W3并没有真正向我澄清......

Answer 1

使用 BEZIER cubics 代替圆圈。这里是斜体P的小例子：

<svg width="512" height="512" viewBox="-32.583735 -32.583735 416.84217 365.16747" >
 <g>
  <path fill="black" stroke="black" d="M 0 300 l 100 -300 l 200 0 c 58.86234 0 60 50 40 110 c -19.996015 59.973009 -39.996015 89.973009 -109.942068 89.997311 l -100.057931 0.002688 l -30 100 l -100 0 "/>
  <path fill="White" stroke="black" d="M 230 60 c 39.999997 0 40.465933 18.757507 30.465933 48.757507 c 0 0 -10 30 -50.318659 31.227083 l -60.147273 0.015409 l 30 -80 l 50 0 "/>
 </g>
</svg>

如果你想要圆弧，那么你需要相应地计算控制点，那里有方程式。请参阅How to create circle with Bézier curves或Google或自行推导。

如果您想要单独的颜色，那么只需将多边形细分为区域，每个区域都有自己的填充颜色。此示例也不透明。如果您需要透明度，那么您需要将P剪切为可填写的细分......

SVG方式使字母'P'具有透明背景

1 个答案: