Question

我有一个SVG代码想要在浏览器上呈现它，我知道它是XML格式我使用inkscape编辑器进行SVG

实际代码很大但如果我可以渲染这个我可以做其余的.Help会非常感激

<!DOCTYPE html>

<html lang="en">
    <head>


    <head>


    <body>


     <?xml version="1.0" encoding="UTF-8" standalone="no"?>
   <!-- Created with Inkscape (http://www.inkscape.org/) -->

<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="744.09448819"
        height="1052.3622047"
        id="svg2"
        version="1.1"
        inkscape:version="0.48.4 r"
        sodipodi:docname="map.svg"
        inkscape:export-filename="C:\Users\Seva\Desktop\map.png"
        inkscape:export-xdpi="90"
        inkscape:export-ydpi="90">
 <defs
        id="defs4" />
        <sodipodi:namedview
        id="base"
        pagecolor="#ffffff"
        bordercolor="#666666"
        borderopacity="1.0"
        inkscape:pageopacity="0.0"
        inkscape:pageshadow="2"
        inkscape:zoom="0.04375"
        inkscape:cx="4115.2158"
        inkscape:cy="42.422884"
        inkscape:document-units="px"
        inkscape:current-layer="layer1"
        showgrid="false"
        inkscape:window-width="467"
        inkscape:window-height="419"
        inkscape:window-x="26"
        inkscape:window-y="26"
        inkscape:window-maximized="0" />
  <metadata
        id="metadata7">
        <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:label="Layer 1"
        inkscape:groupmode="layer"
        id="layer1">
<    rect
       style="fill:#aaebff;fill-opacity:1;stroke:#000e12;stroke-   width:21.07428932;stroke-        miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
    id="rect4055"
   width="3067.7397"
   height="73.105568"
   x="-1286.5527"
   y="-617.04779" />
<path
   sodipodi:type="arc"
                                                                      style="fill:#e0e91b;fill-opacity:1;stroke:#090000;stroke-width:17;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
   id="path2993"
   sodipodi:cx="-354.28571"
   sodipodi:cy="168.07646"
   sodipodi:rx="88.571426"
   sodipodi:ry="88.571426"
      d="m -265.71428,168.07646 a 88.571426,88.571426 0 1 1 -177.14285,0     88.571426,88.571426 0 1 1 177.14285,0 z"
   transform="matrix(1.608868,0,0,1.608868,-850.00101,-844.25513)" />

Answer 1

有效。只有规模问题。您只能可视化SVG绘图的空白部分。 Inkscape使用浏览器不考虑的一些特定配置参数（inkscape:...标记中的属性svg）。通过很好地选择viewBox属性的参数，可以看到您给出的代码中定义的形状。

我只是更改了属性width和height，并将viewBox一个添加到svg标记，以获取http://jsfiddle.net/pyU7x/处的工作示例。

<svg
...
viewBox="-2000 -100 6000 200"
width="400"
height="300">

很抱歉，但我不熟悉Inkscape提出一种生成更多标准SVG文件的方法。也许你必须在纯SVG中保存文件而不是Inkscape SVG。

我有一个SVG代码想在浏览器上呈现它，我知道它是XML格式我使用inkscape编辑器为SVG

1 个答案: