Question

我有一个非常简单的svg文件，一个书架，我从Inkscape中的公共域图像中提取。我的目的是在WinForms中使用SVG渲染器从中生成可变宽度的位图。

它在Inkscape中运行良好，但不希望在IE或Chrome或DevExpress Svg渲染器或公共域SVG Viewer中显示。

我应该在XML中更改什么才能使其在Inkscape之外工作？

<?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"
   id="svg11134"
   version="1.1"
   viewBox="0 0 100 9.9999993"
   height="10mm"
   width="100mm">
  <defs
     id="defs11128">
    <clipPath
       clipPathUnits="userSpaceOnUse"
       id="clipPath304">
      <path
         d="M 4410,3710 H 90 v -180 h 4320 z"
         id="path302" />
    </clipPath>
    <clipPath
       clipPathUnits="userSpaceOnUse"
       id="clipPath320">
      <path
         d="M 360,3890 90,3710 h 4320 l -270,180 z"
         id="path318" />
    </clipPath>
    <linearGradient
       x1="0"
       y1="0"
       x2="1"
       y2="0"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(-7.9e-6,180,180,7.9e-6,2250,3710)"
       spreadMethod="pad"
       id="linearGradient326">
      <stop
         style="stop-opacity:1;stop-color:#ebecea"
         offset="0"
         id="stop322" />
      <stop
         style="stop-opacity:1;stop-color:#d6d7d5"
         offset="1"
         id="stop324" />
    </linearGradient>
  </defs>
  <g
     transform="translate(13.396613,-100.26342)"
     id="layer1">
    <g
       id="g9848"
       transform="matrix(-0.62409419,0,0,0.93340311,-15.02437,93.369296)">
      <g
         transform="matrix(0.02909742,0,0,-0.02975968,4.8287909,123.15116)"
         id="g9840">
        <g
           id="g9838"
>
          <path
             d="M 4410,3710 H 90 v -180 h 4320 v 180"
             style="fill:#d6d7d5;fill-opacity:1;fill-rule:nonzero;stroke:none"
             id="path9836" />
        </g>
      </g>
      <g
         transform="matrix(0.02909742,0,0,-0.02975968,4.8287909,123.15116)"
         id="g9846">
        <g
           id="g9844"
>
          <path
             d="M 360,3890 90,3710 h 4320 l -270,180 H 360"
             style="fill:url(#linearGradient326);fill-opacity:1;fill-rule:nonzero;stroke:none"
             id="path9842" />
        </g>
      </g>
    </g>
  </g>
</svg>

Answer 1

grafics超出了viewBox限制（显示的区域之外）。

Inkscape往往会产生大量的问题，这使得在可视化编辑器之外维护和更改SVG几乎是不可能的。以下是相同的图像，简化为基本要素，包括一些变化：

我删除了SVG的宽度/高度值。在大多数情况下，给实际值（这里：mm）提供维度是没有用的。并且你说你想生产可变大小的位图。这相当于覆盖这些值，因此您可以将它们保留在源文件中。
已在viewBox内移动了grafic元素，并解析了所有转换。
grafics不会填充整个viewBox宽度。我把它们扩大到了100：10的比例。

如果要更改高度/宽度比，可以在preserveAspectRatio="none"元素上设置属性<svg>，并在导出程序中设置任意输出尺寸。然后，grafics将非均匀地缩放并始终填充视口。

＆＃13;

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10">
  <defs>
    <linearGradient id="grad" gradientUnits="userSpaceOnUse" x1="50" y1="5" x2="50" y2="0">
      <stop offset="0" stop-color="#ebecea" />
      <stop offset="1" stop-color="#d6d7d5" />
    </linearGradient>
  </defs>
  <path d="M 100,5 V 10 H 0 V 5 Z" fill="#d6d7d5" />
  <path d="M 100,5 L 95,0 H 5 L 0,5 Z" fill="url(#grad)" />
</svg>

＆＃13;

SVG文件仅适用于某些地方

1 个答案: