svg - 我如何绘制 SVG 箭头，ImageMagick 可以将其导出为 PNG

Question

这是我的 SVG 文件:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="32px"
   height="32px"
   id="svg2985"
   version="1.1"
   inkscape:version="0.48.3.1 r9886"
   sodipodi:docname="changeStatus.png">
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="11.197802"
     inkscape:cx="-0.20853807"
     inkscape:cy="16"
     inkscape:current-layer="layer1"
     showgrid="true"
     inkscape:grid-bbox="true"
     inkscape:document-units="px"
     inkscape:window-width="1330"
     inkscape:window-height="780"
     inkscape:window-x="2493"
     inkscape:window-y="54"
     inkscape:window-maximized="0" />
  <defs
     id="defs2987">
    <marker
       style="overflow:visible;"
       id="Arrow2Mend5"
       refX="0.0"
       refY="0.0"
       orient="auto"
       inkscape:stockid="Arrow2Mend5">
      <path
         transform="scale(0.6) rotate(180) translate(0,0)"
         d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
         style="stroke-linejoin:round;stroke:#9999cc;stroke-width:0.62500000;fill:#9999cc;fill-rule:evenodd"
         id="path4232" />
    </marker>
  </defs>
  <metadata
     id="metadata2990">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:groupmode="layer"
     inkscape:label="Layer 1"
     id="layer1">
    <rect
       ry="0"
       y="2.1727178"
       x="2.2176549"
       height="7.412169"
       width="28.003029"
       id="rect2993"
       style="fill:none;stroke:#9999cc;stroke-width:2;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" />
    <rect
       ry="0"
       y="22.221294"
       x="2.3409784"
       height="7.412169"
       width="28.003029"
       id="rect2993-1"
       style="fill:none;stroke:#9999cc;stroke-width:2;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" />
    <path
       inkscape:connector-curvature="0"
       id="path3781"
       d="m 15.98528,6.5033682 0,16.5092328"
       style="fill:none;stroke:#9999cc;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-opacity:1;stroke-dasharray:none;marker-end:url(#Arrow2Mend5)" />
  </g>
</svg>

现在，当我使用 Incscape 将其保存为 PNG 时，一切正常:

当我用 ImageMagick 转换它时，箭头丢失了:

我这样转换:

convert -resize 32x32 -transparent white changeStatus.svg changeStatus.png

我必须在 SVG 源中修改哪些内容才能使 ImageMagic 能够处理它？<​​/p>

Answer 1

您可以将箭头转换为 Inkscape 中的路径。选择箭头，然后使用笔划到路径功能(可以通过“路径->笔划到路径”或通过快捷键 Ctrl-Alt-C 访问)。

如果将修改后的图形保存为 svg，则通过 ImageMagic 进行转换应该没问题。