Visual生成的svg在inkscape中呈现，与浏览器中不同

Question

当我以视觉范式格式创建are图表并以SVG格式导出它们时，它们在浏览器中被正确呈现，但在Inkscape之类的程序中被错误地呈现。

例如，这是浏览器(Chrome或IE)中的呈现：

​

​

下面是在Inkscape或其他PDF转换器中呈现相同文件的方式：

​

​

下面是svg文件：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN'
          'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg fill-opacity="0" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="rgb(0,0,0)" stroke-linecap="square" width="686" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="0" fill="rgb(0,0,0)" stroke-dasharray="none" font-weight="normal" stroke-width="1" height="699" xmlns="http://www.w3.org/2000/svg" font-family="&apos;Dialog&apos;" font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto"
><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"
  /><g
  ><defs id="defs1"
    ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1"
      ><path d="M-7 -7 L691 -7 L691 704 L-7 704 L-7 -7 Z"
      /></clipPath
      ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath2"
      ><path d="M0 0 L0 21 L134 21 L134 0 Z"
      /></clipPath
      ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath3"
      ><path d="M-7 -7 L225 -7 L225 63 L-7 63 L-7 -7 Z"
      /></clipPath
      ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath4"
      ><path d="M0 0 L0 52 L214 52 L214 0 Z"
      /></clipPath
    ></defs
    ><g fill="white" text-rendering="geometricPrecision" fill-opacity="1" stroke-opacity="1" stroke="white"
    ><rect x="0" width="686" height="699" y="0" stroke="none"
    /></g
    ><g stroke-linecap="butt" font-size="11" transform="translate(2,2)" fill-opacity="1" fill="black" text-rendering="geometricPrecision" font-family="sans-serif" stroke-linejoin="round" stroke="black" font-weight="bold" stroke-opacity="1" stroke-miterlimit="0"
    ><rect x="1" y="1" clip-path="url(#clipPath1)" fill="none" width="678" rx="15" ry="15" height="691"
    /></g
    ><g font-size="11" transform="translate(2,2)" fill-opacity="1" fill="black" text-rendering="geometricPrecision" font-family="sans-serif" stroke="black" font-weight="bold" stroke-opacity="1"
    ><text x="10" xml:space="preserve" y="18" clip-path="url(#clipPath2)" stroke="none"
      >Testing Some Diagram</text
    ></g
    ><g stroke-linecap="butt" font-size="11" transform="translate(74,33)" fill-opacity="1" fill="black" text-rendering="geometricPrecision" font-family="sans-serif" stroke-linejoin="round" stroke="black" stroke-opacity="1" stroke-miterlimit="0"
    ><rect x="0" y="0" clip-path="url(#clipPath3)" fill="none" width="214" rx="15" ry="15" height="52"
    /></g
    ><g font-size="11" transform="translate(74,33)" fill-opacity="1" fill="black" text-rendering="geometricPrecision" font-family="sans-serif" stroke="black" stroke-opacity="1"
    ><text x="9" xml:space="preserve" y="15" clip-path="url(#clipPath4)" stroke="none"
      >Lorem ipsum dolor sit amet, consectetur</text
      ><text x="6" xml:space="preserve" y="30" clip-path="url(#clipPath4)" stroke="none"
      >adipiscing elit. In congue lorem orci, vitae</text
      ><text x="84" xml:space="preserve" y="45" clip-path="url(#clipPath4)" stroke="none"
      >mollis mi.</text
    ></g
    ><g fill="rgb(120,120,120)" text-rendering="geometricPrecision" fill-opacity="1" font-size="10" stroke-opacity="1" stroke="rgb(120,120,120)"
    ><text x="423" xml:space="preserve" y="686" stroke="none"
      >Powered ByVisual Paradigm Community Edition</text
      ><image font-size="12" x="662" y="672" fill="white" width="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAB6ElEQVR42mNgIAKc
MTZuPm1i0kWMWkYiDKsBUs1QbguIMDl7thaXeiYGKgNGAi5jQHIdQtP//63G587V
YNPHTMCbTlCh5f8ZGa8BbdeBmMholyYlxTLr+fP9BA1ECzMQWAPEsQIfP278ycGh
DWTfAGJNIMZqKCMuw4DeOgiijc6dcwIq+gdirwoNBTtA+e7dvUAX28O8D1VXC1T3
n+qRwgJ1WS56BABdoAKWMzV1Yjh9eg+IrXTvniVUTgFJXTWIPmts/IXh7NkOFqiz
90DlTwMVmELZ0mC5f/9WAy0M+svMfInh79/NUDkBJEddhJqxDSMMgbnBASjRCWSa
ofnkHRBHArExlN8Gpc8BHVABYpieObMbHstAF+gCY0wcaPomIBfkih9ArIhkICcQ
ewExKPs9AuIHQMwKjbgmoL6gFBmZg7OfPXtGm0jh/PHjJoj+zsExG0iBkk4nkhpY
4hYG4u0gxj8mJlumf/8+Ab07AcjtAYkJvn9/CWvWO2tkVA9U2ABkdkCFzJAMPQGN
gONANYUgNcCCohJvTgGm/IOp0tKMjBCX2oDSM1TqOdCgvUDx+0DDSkG+QDcMb+EA
jPEGqGvqgVQ7EP8GYlix1QU0rGJgiy8sYcoAdSmogK2iyFZgOm0D4h5i1AIAuQCv
ZpMHcwsAAAAASUVORK5CYII=" height="20" stroke="white" preserveAspectRatio="none"
    /></g
  ></g
></svg
>

我需要转换文件与正确的渲染为PDF。能帮我一下吗？

Answer 1

问题是由于指定的字体属性。svg中指定的字体系列是"sans-serif“。浏览器使用的默认无衬线字体是Arial，Inkscape使用操作系统的默认字体，即Windows机器上Inkscape使用的无衬线字体是Verdana。

因此，在svg中将"sans-serif“替换为"arial”解决了这个问题。