SVG, сгенерированный в vue-app, имеет смещение шаблона в Illustrator - PullRequest
Новая
       26

SVG, сгенерированный в vue-app, имеет смещение шаблона в Illustrator

0 голосов
/ 17 мая 2019

Когда я генерирую SVG-файлы в своем vue-приложении и открываю их в Illustrator, шаблоны смещаются вправо и немного вниз.

Я пытался решить проблему с помощью Google, но мне удалось найти только информацию об экспорте из Illustrator для Интернета, а не наоборот. Я также попытался сгенерировать SVG, как это делал Illustrator, но я не могу понять, как 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>

Это тот же SVG после сохранения в Illustrator: 

<?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>

Illustrator меняет много вещей при открытии SVG, но это не имеет значения, поскольку внешний вид остается неизменным почти во всем остальном, что я использую, за исключением шаблонов.

Я ожидаю, что Illustrator запустит шаблон в той же точке, что и браузер, то есть в верхнем левом углу элемента, к которому применяется шаблон.

...