Question

当我在vue应用中生成SVG并在Illustrator中将其打开时，图案会向右偏移，并稍微向下。

我试图用Google搜索这个问题，但是我只能找到有关从Illustrator导出到Web的信息，反之则不行。我也尝试过像Illustrator那样生成SVG，但我不知道Illustrator如何提出这些变换矩阵值。

这是由应用程序生成的SVG，其中仅包含图案和背景：

<svg
  id="previewSvg"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xml:space="preserve"
  x="0px"
  y="0px"
  width="5000"
  height="2500"
  viewBox="0 0 5000 2500"
>
  <defs>
    <pattern
      id="BrickWall"
      y="0"
      width="40"
      height="38"
      viewBox="0 0 40 38"
      patternUnits="userSpaceOnUse"
      style=""
      x="0"
      patternTransform="matrix(10,0,0,-10,0,0)"
    >
      <rect
        width="40"
        height="2"
        x="0"
        y="0"
        fill="White"
      ></rect>
      <rect
        width="2"
        height="18"
        x="38"
        y="2"
        fill="White"
      ></rect>
      <rect
        width="38"
        height="2"
        x="0"
        y="18"
        fill="White"
      ></rect>
      <rect
        width="2"
        height="18"
        x="18"
        y="20"
        fill="White"
      ></rect>
    </pattern>
  </defs>
  <g>
    <rect
      width="5000"
      height="2500"
      fill="Maroon"
      fill-opacity="1"
    ></rect>
    <rect
      width="5000"
      height="2500"
      fill="url(#BrickWall)"
      fill-opacity="0.75"
    ></rect>
  </g>
</svg>

这是在Illustrator中保存后的同一SVG：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="previewSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 5000 2500" style="enable-background:new 0 0 5000 2500;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;}
    .st1{fill:#FFFFFF;}
    .st2{fill:#800000;}
    .st3{fill:url(#SVGID_1_);fill-opacity:0.75;}
</style>
<pattern  y="2500" width="40" height="38" patternUnits="userSpaceOnUse" id="BrickWall" viewBox="0 -38 40 38" style="overflow:visible;">
    <g>
        <rect y="-38" class="st0" width="40" height="38"/>
        <rect y="-2" class="st1" width="40" height="2"/>
        <rect x="38" y="-20" class="st1" width="2" height="18"/>
        <rect y="-20" class="st1" width="38" height="2"/>
        <rect x="18" y="-38" class="st1" width="2" height="18"/>
    </g>
</pattern>
<g>
    <rect class="st2" width="5000" height="2500"/>
    <pattern  id="SVGID_1_" xlink:href="#BrickWall" patternTransform="matrix(10 0 0 10 51318 95640)">
    </pattern>
    <rect class="st3" width="5000" height="2500"/>
</g>
</svg>

打开SVG时，Illustrator会进行很多更改，但这是不相关的，因为除了图案之外，我使用的其他所有东西的外观都保持不变。

我希望Illustrator在浏览器的同一点启动模式，这是应用模式的元素的左上角。

在vue-app中生成的SVG在Illustrator中具有模式偏移

0 个答案: