在SVG中创建没有文本标签的特定符号

我正在尝试弄清楚如何正确地编辑SVG文件。我有以下代码:

<svg width="80" height="50" viewBox="0 0 80 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="80" height="50" rx="4" fill="#497284" fill-opacity="0.09"/>
<path d="M70 11.8092V11.5C70 8.42972 68.2774 6 64.6107 6C60.8949 6 59 8.38554 59 11.5663C59 14.6145 61.1409 17 64.66 17C66.8993 17 68.9172 15.9618 70 14.1727L68.1298 13.2229C67.2931 14.4598 66.3826 15.2329 64.6846 15.2329C62.5682 15.2329 61.2394 13.5763 61.2148 11.8092H70ZM61.3378 10.3072C61.6085 8.82731 62.8881 7.72289 64.6107 7.72289C66.3826 7.72289 67.5145 8.76104 67.7852 10.3072H61.3378Z" fill="#586D8C"/>
</svg>

它创建一个在角上带有字母“ e”的框。我想将字母更改为某些符号(在我的情况下-逻辑运算符“ NOT”符号)。我发现我可以如下使用text标签:

<svg width="80" height="50" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>background</title>
  <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 </g>
 <g>
  <title>Layer 1</title>
  <rect x="0.114941" y="0.229882" id="svg_1" fill-opacity="0.09" fill="#497284" rx="4" height="50" width="80"/>
  <path id="svg_2" fill="#586D8C" d="m57.5,34c4.1421,0 7.5,-3.3579 7.5,-7.5c0,-4.1421 -3.3579,-7.5 -7.5,-7.5c-3.803,0 -6.9451,2.8306 -7.434,6.5l-37.066,0l0,3l37.2697,0c0.8752,3.1711 3.7808,5.5 7.2303,5.5z" clip-rule="evenodd" fill-rule="evenodd"/>
  <text transform="matrix(1.6882815594622569,1.3037036829424493,-58.03884193994182,9.82972205136589) " xml:space="preserve" text-anchor="start" font-family="Helvetica,Arial,sans-serif" font-size="24" id="svg_7" y="10.069448" x="66.18055" stroke-width="0" fill="#586D8C">¬</text>
 </g>
</svg>

但是我不愿意。我正在尝试找到一种使用path标签创建该符号的方法。所需的最终结果应该是:

在SVG中创建没有文本标签的特定符号

实现它的正确方法是什么?

lili_beijing 回答:在SVG中创建没有文本标签的特定符号

您可以尝试通过遵循文本形状来创建此路径。在下一个示例中,我将创建一个用黑色填充的路径。请注意,路径命令都是相对的,第一个命令M0,0从原点(0,0)开始路径。您可以将路径转换为所需的路径(transform="translate(55.5,10.5)"),也可以将第一个命令从M0,0更改为所需的路径,而无需更改其余路径。在这种情况下,第一个命令可能是:M55.5,10.5

<svg viewBox="0 0 80 50" >
 <g>
  <title>Layer 1</title>
  <rect x="0.114941" y="0.229882" id="svg_1" fill-opacity="0.09" fill="#497284" rx="4" height="50" width="80"/>
  <!--<text transform="matrix(1.6882815594622569,1.3037036829424493,-58.03884193994182,9.82972205136589) " xml:space="preserve" text-anchor="start" font-family="Helvetica,Arial,sans-serif" font-size="24" id="svg_7" y="10.069448" x="66.18055" stroke-width="0" fill="#586D8C">¬</text>-->
   <path d="M0,0h20.5v9h-3v-6.5h-17.5z" transform="translate(55.5,10.5)" />
 </g>
</svg>

本文链接:https://www.f2er.com/3092542.html

大家都在问