如何在svg中间添加形状答案

【问题标题】：How to add shape in middle of svg如何在svg中间添加形状
【发布时间】：2017-05-12 18:17:46
【问题描述】：

我正在尝试在圆圈中间添加一个护士形状。顶部有 2 个形状，我需要放在圆圈中间。有人能帮我吗。这是一个svg：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG    Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="40px" height="40px" 
 viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<g>
<g>
    <path fill="#056991" d="M18.2,14.6c-0.2-0.6-0.5-1.2-0.9-1.7l0,0l-0.1,0l1.7-3C17.6,8.1,15.6,7,13.3,7C11,7,9,8.1,7.6,9.8
        c0.1,0.2,1.2,2.2,1.6,3l-0.1,0v0c-0.3,0.5-0.6,1.1-0.8,1.7c-0.2,0.6-0.8,2.8-0.8,3.5c0,0.6,0.2,1.3,0.7,1.7c0.4,0.4,1,0.7,1.7,0.7
        h0.6c0.8,0,1.8,0.9,2.8,0.9s2-0.9,2.8-0.9h0.6c0.7,0,1.3-0.3,1.7-0.7c0.4-0.4,0.6-1,0.6-1.6C19.1,17.4,18.4,15.2,18.2,14.6z
         M13.3,7.7c1.9,0,3.6,0.8,4.9,2.2l-1.3,2.5c-0.7-0.2-1.9-0.4-3.5-0.4c-1.6,0-2.8,0.2-3.5,0.4c-0.4-0.7-1-1.9-1.3-2.5
        C9.7,8.5,11.5,7.7,13.3,7.7z M13.3,19.9c-1.8,0-4.1-1.9-4.3-4.1c1-0.9,1.9-3.7,1.9-3.7c1.2,2,2.9,2.4,5,2.4c0.7,0,1.2,0.1,1.5-0.1
        c0.1,0.3,0.1,1,0.1,1.4C17.6,18.2,15.1,19.9,13.3,19.9z"/>
    <polygon fill="#056991" points="14.8,10.3 13.8,10.3 13.8,11.3 12.9,11.3 12.9,10.3 11.8,10.3 11.8,9.4 12.9,9.4 12.9,8.3 
        13.8,8.3 13.8,9.4 14.8,9.4      "/>
</g>
<g>
    <path fill="#056991" d="M31.7,14.6c-0.2-0.6-0.5-1.2-0.9-1.7l0,0l-0.1,0l1.7-3C31.1,8.1,29.1,7,26.8,7c-2.3,0-4.3,1.1-5.7,2.8
        c0.1,0.2,1.2,2.2,1.6,3l-0.1,0v0c-0.3,0.5-0.6,1.1-0.8,1.7C21.7,15.1,21,17.4,21,18c0,0.6,0.2,1.3,0.7,1.7c0.4,0.4,1,0.7,1.7,0.7
        H24c0.8,0,1.8,0.9,2.8,0.9s2-0.9,2.8-0.9h0.6c0.7,0,1.3-0.3,1.7-0.7c0.4-0.4,0.6-1,0.6-1.6C32.6,17.4,31.9,15.2,31.7,14.6z
         M26.8,7.7c1.9,0,3.6,0.8,4.9,2.2l-1.3,2.5c-0.7-0.2-1.9-0.4-3.5-0.4c-1.6,0-2.8,0.2-3.5,0.4c-0.4-0.7-1-1.9-1.3-2.5
        C23.2,8.5,25,7.7,26.8,7.7z M26.8,19.9c-1.8,0-4.1-1.9-4.3-4.1c1-0.9,1.9-3.7,1.9-3.7c1.2,2,2.9,2.4,5,2.4c0.7,0,1.2,0.1,1.5-0.1
        c0.1,0.3,0.1,1,0.1,1.4C31.1,18.2,28.6,19.9,26.8,19.9z"/>
    <polygon fill="#056991" points="28.3,10.3 27.3,10.3 27.3,11.3 26.4,11.3 26.4,10.3 25.3,10.3 25.3,9.4 26.4,9.4 26.4,8.3 
        27.3,8.3 27.3,9.4 28.3,9.4      "/>
</g>
 </g>
  <circle fill="none" stroke="#056991" stroke-width="2.08" stroke-miterlimit="10" cx="20" cy="19.8" r="18.8"/>



 </svg>

【问题讨论】：

为什么不使用像 inkscape 这样的 SVG 编辑器来做到这一点？
我尝试使用这个：petercollingridge.appspot.com。但这很难做到。

标签： css image svg

【解决方案1】：

下载inkscape
https://inkscape.org/en/download/
打开它。
编辑它。
将其导出为 svg。

这里有一些提示，告诉你更多关于 svg 的信息：
http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial
Youtube 充满了有关 inkscape 的操作指南。所以在这种情况下： 1.先搜索youtube
2. 谷歌
3. 应该使用 inkscape 搜索您的大部分问题 - 它易于使用的编辑器。

注意：也许可以尝试保存一些 svg 图像并查看它的内部外观（使用 pspad 或 notepad++ 或任何文本编辑器）。

【讨论】：