使用 SVG 路径创建加号 (+)答案

【问题标题】：Create a Plus Symbol (+) with an SVG Path使用 SVG 路径创建加号 (+)
【发布时间】：2013-02-20 12:16:35
【问题描述】：

我正在尝试创建一个 + 号作为谷歌地图项目的 SVG 路径。加号将使用图标路径属性沿折线绘制。到目前为止，我已经接近了，我的加号目前看起来像一条水平线，垂直设置在一端“-|”。我需要它出现在水平线的中间，使它看起来像一个加号。

我的当前路径是使用以下路径命令设置的：

path: 'M 0,-1 0,1 H -1,1 0,1'

我应该如何改变它以实现我的加号？我可以找到很多关于更复杂的形状、曲线、渐变填充等的示例，但我的知识有限，我很难找到正确的坐标来表达我的形状！

【问题讨论】：

能否使用文本元素代替路径，然后只渲染一个加号？
我没想到 - 知道语法吗？
不知道，但如果你在做var x = { path: 'M 0,-1 0,1 H -1,1 0,1', strokeColor: '#f00' }，那么可能是var x = { text: '+', strokeColor: '#f00' }？
可悲的是，它似乎不支持文本作为属性，这本来很好但似乎不受支持！

【解决方案1】：

我想你想要的是：

path: 'M0,-1 V1 M-1,0 H1'

这意味着从 (0, -1) 开始，垂直绘制 1 个单位，然后移动到 (-1, 0) 并水平绘制 1 个单位。

【讨论】：

啊，谢谢你，更简洁！奇迹般有效。你能推荐任何好的在线资源来测试路径等等，比如我有很多小路径我需要生成，每次我做出改变时重新加载我的应用程序有点痛苦？非常感谢！
我不知道类似的事情。我做了一些类似的事情，您可以拖动一些现有路径的点并查看代码：petercollingridge.co.uk/svg-tutorial/paths。也许我会尝试制作一些可以添加新路径和节点的东西。
嘿，感谢您的提示和您的帖子我一定会阅读和使用它！ ;o)

【解决方案2】：

虽然我相当肯定这不是描述这条路径的最简洁的方式，但我设法使用以下路径语句构建了一个加号 [更多通过反复试验和一些非常模糊的 Turtle 记忆]：

path: 'M 0,0 H 0.5,0.5 1,1 M 0,0 V 0.5,0.5 1,1 M 0,0 H -0.5,-0.5 -1,-1 M 0,0 V -0.5,-0.5 -1,-1',

【讨论】：