使用fabric js在Adobe Illustrator中设置svg背景不起作用

我使用数据uri将svg文件设置为画布的背景。我用织物js来做这个。当我将它导出为svg文件时，它在每个浏览器中都能正常工作。但是在AdobeIllustrator中打开svg文件并没有显示背景。有解决办法吗

下面是使用fabris.js'

toSVG

功能生成的代码

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="400" xml:space="preserve">
    <desc>Created with Fabric.js 1.4.5</desc>
    <defs></defs>
    <g transform="translate(300 200)">
      <image xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgODAwIDYwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgODAwIDYwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9ImJhY2tncm91bmQ6IHdoaXRlIiB3aWR0aD0iODAwcHgiIGhlaWdodD0iNjAwcHgiPg0KPHJlY3QgeD0iLTc2IiB5PSItMzIiIGZpbGw9IiNBRUQyNUIiIHdpZHRoPSI5NDQiIGhlaWdodD0iNjk2Ii8+DQo8Zz4NCgk8cGF0aCBkPSJNNzU4LDQxdjUxM0g0M1Y0MUg3NTggTTc3MiwyN0gyOXY1NDFoNzQzVjI3TDc3MiwyN3oiLz4NCjwvZz4NCjwvc3ZnPg0K" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;" transform="translate(-300 -200)" width="600" height="400" preserveAspectRatio="none">
</image>
</g>
   <g transform="translate(352.6 226.6) scale(0.1 0.1)">
     <path d="M 251 30.5725 C 239.505 33.871 233.143 56.2086 228.247 66 L 192.247 139 C 187.613 148.267 183.524 162.173 176.363 169.682 C 170.726 175.592 151.9 174.914 144 176 L 57 188.729 C 46.5089 190.241 22.8477 189.409 18.0093 201.015 C 12.21 214.927 32.8242 228.824 41 237 L 95 289.83 C 104.569 298.489 120.214 309.405 126.11 321 C 130.001 328.651 123.466 345.797 122.081 354 L 107 442 C 105.042 452.114 99.142 469.478 105.228 478.895 C 109.142 484.95 116.903 484.628 123 482.64 C 137.319 477.973 151.822 468.444 165 461.139 L 232 425.756 C 238.285 422.561 249.81 413.279 257 415.071 C 268.469 417.93 280.613 427.074 291 432.691 L 359 468.258 C 369.618 473.739 386.314 487.437 398.985 483.347 C 413.495 478.664 405.025 453.214 403.25 443 L 388.75 358 C 387.045 348.184 380.847 332.006 383.194 322.285 C 385.381 313.225 403.044 300.467 410 294.424 L 469 237 C 477.267 228.733 493.411 218.004 492.941 205 C 492.398 189.944 465.753 190.478 455 189 L 369 176.421 C 359.569 175.025 343.388 175.914 335.213 170.976 C 328.335 166.822 323.703 151.166 320.576 144 L 289.753 82 L 268.532 39 C 264.58 32.6459 258.751 28.3485 251 30.5725 z" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #FF0000; opacity: 1;" transform="translate(-256 -256)" stroke-linecap="round" />
 </g>
</svg>

使用Fabric.js 1.4.5创建

我附上了svg是如何在web浏览器和Adobe Illustrator中分别呈现的。 （图像中的星形图标是我创建的前景图像。）

浏览器的实际输出：

Adobe Illustrator：

有没有人遇到过这种问题

---

除此之外，当我使用图像文件而不是svg作为背景时，它也会在Adobe Illustrator中正确显示。

您可以尝试设置画布，以便导出的svg文件将背景作为svg元素，而不是嵌入图像。Illustrator似乎不支持将一个SVG嵌入另一个SVG，正如您所做的那样

fabric.loadSVGFromURL

或

fabric.loadSVGFromString

方法应该将SVG解析为可以添加到画布中的对象。文档中有一些简短的文档

您希望生成的SVG看起来像这样；重要的变化在第7-13行

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="400" xml:space="preserve">
  <desc>Created with Fabric.js 1.4.5</desc>
  <defs></defs>

  <!-- This <g> element puts the background image inline, instead of using a data URI -->
  <g>
    <rect fill="#AED25B" width="600" height="400"/>
    <g>
      <path d="M530.085,41.954v294.827H75.636V41.954H530.085 M538.983,33.908H66.737v310.919h472.246V33.908L538.983,33.908z"/>
    </g>
  </g>

  <g transform="translate(352.6 226.6) scale(0.1 0.1)">
    <path d="M 251 30.5725 C 239.505 33.871 233.143 56.2086 228.247 66 L 192.247 139 C 187.613 148.267 183.524 162.173 176.363 169.682 C 170.726 175.592 151.9 174.914 144 176 L 57 188.729 C 46.5089 190.241 22.8477 189.409 18.0093 201.015 C 12.21 214.927 32.8242 228.824 41 237 L 95 289.83 C 104.569 298.489 120.214 309.405 126.11 321 C 130.001 328.651 123.466 345.797 122.081 354 L 107 442 C 105.042 452.114 99.142 469.478 105.228 478.895 C 109.142 484.95 116.903 484.628 123 482.64 C 137.319 477.973 151.822 468.444 165 461.139 L 232 425.756 C 238.285 422.561 249.81 413.279 257 415.071 C 268.469 417.93 280.613 427.074 291 432.691 L 359 468.258 C 369.618 473.739 386.314 487.437 398.985 483.347 C 413.495 478.664 405.025 453.214 403.25 443 L 388.75 358 C 387.045 348.184 380.847 332.006 383.194 322.285 C 385.381 313.225 403.044 300.467 410 294.424 L 469 237 C 477.267 228.733 493.411 218.004 492.941 205 C 492.398 189.944 465.753 190.478 455 189 L 369 176.421 C 359.569 175.025 343.388 175.914 335.213 170.976 C 328.335 166.822 323.703 151.166 320.576 144 L 289.753 82 L 268.532 39 C 264.58 32.6459 258.751 28.3485 251 30.5725 z" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #FF0000; opacity: 1;" transform="translate(-256 -256)" stroke-linecap="round" />
  </g>
</svg>

使用Fabric.js 1.4.5创建

据我所知，问题在于Illustrator不支持使用数据URI将一个SVG图像嵌入另一个SVG（SVG的第7行）。网络浏览器会做到这一点，Illustrator不会。你能告诉我们更多关于你试图解决的更大的问题吗？我们可以建议一种替代方法来实现您的目标。问题是，我正在尝试从画布将文件导出为svg。我需要设置另一个svg图像作为此画布的背景。Url嵌入不是首选，因为我需要在illustrator中打开svg。这就是我使用数据URI的原因。那么，对于实现这一点有什么建议吗？+1。我像这样检查，除了背景图像的错位外，它工作得很好。我认为，这必须通过“g”标记中的“translate”标准来完成。我之所以给出like-data-URI，是因为对于图像，它工作得很好。