使用fabric js设置svg背景在Adobe Illustrator中不起作用-Java 学习之路

我使用数据uri将svg文件设置为画布的背景 . 我正在使用面料js . 当我将其导出为svg文件时，它在每个浏览器中都能正常工作 . 但是在Adobe Illustrator中打开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>

我将分别介绍如何在Web浏览器和Adobe Illustrator中呈现svg . （图像中的星形图标是我创建的前景图像 . ）

浏览器的实际输出：

http://oi57.tinypic.com/13zs7q0.jpg http://oi57.tinypic.com/13zs7q0.jpg

Adobe Illustrator：

http://oi59.tinypic.com/2lcp5as.jpg http://oi59.tinypic.com/2lcp5as.jpg

有没有人遇到过这类问题？

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

1 回答

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

fabric.loadSVGFromURL 或 fabric.loadSVGFromString 方法应将SVG解析为可添加到画布的对象 . Fabric Intro中有简要的文档 .

您希望生成的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>

回复于 2024-04-28T18:01:30+08:00

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

1 回答

相关问题