如何让SVG中的pattern在Adobe Illustrator中可编辑？

问题描述 #

现有一个使用<pattern>填充的SVG，代码如下：

<svg width="600" height="180">
  <defs>
    <pattern id="carrot" patternUnits="userSpaceOnUse" width="50" height="50">
     <path fill="darkorange" d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1 
                                9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2 
                                2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3 
                                2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="lightgreen"/>
  <rect width="100%" height="100%" fill="url(#carrot)"/>
</svg>

在Adobe Illustrator中编辑该SVG时，存在以下问题：

• 缩放SVG时，图案中的胡萝卜图标大小保持不变
• 移动SVG时，图案不会跟随移动
• 仅能修改背景矩形颜色，无法更改胡萝卜图案的颜色

当前效果：

期望实现的效果是：缩放SVG时图标同步缩放，可修改单个图标颜色，移动SVG时图案完全跟随，效果如下：

尝试过的无效方案 #

方案1：设置patternUnits="objectBoundingBox" #

修改后的代码如下：

<svg width="600" height="180">
  <defs>
    <pattern id="carrot" patternUnits="objectBoundingBox" width="0.1" height="0.3">
     <path fill="darkorange" d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1 
                                9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2 
                                2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3 
                                2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="lightgreen"/>
  <rect width="100%" height="100%" fill="url(#carrot)"/>
</svg>

在Adobe Illustrator中打开时，仅显示绿色背景，图案完全不显示：

方案2：设置patternContentUnits="objectBoundingBox" #

修改后的代码如下：

<svg width="600" height="180">
  <defs>
    <pattern id="carrot" patternContentUnits="objectBoundingBox" width="0.2" height="0.3">
     <path fill="darkorange" d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1 
                                9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2 
                                2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3 
                                2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8" transform="scale(0.005)"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="lightgreen"/>
  <rect width="100%" height="100%" fill="url(#carrot)"/>
</svg>

图案虽能显示，但仍无法在Illustrator中进行编辑（缩放不同步、无法修改颜色）。

可行解决方案：使用重复嵌入图形替代<pattern> #

Adobe Illustrator对SVG原生<pattern>的可编辑支持有限，因此可以通过直接生成重复的独立图形元素来实现需求。这种方式下，每个图形都是可单独编辑的，且会随SVG整体缩放、移动。

实现代码 #

<svg width="600" height="180">
  <!-- 背景矩形 -->
  <rect width="100%" height="100%" fill="lightgreen"/>
  
  <!-- 定义可复用的胡萝卜图形 -->
  <defs>
    <g id="carrot-shape">
      <path fill="darkorange" d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1 
                                9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2 
                                2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3 
                                2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8"/>
    </g>
  </defs>
  
  <!-- 按网格重复放置胡萝卜图形 -->
  <g transform="translate(20, 20) scale(0.7)">
    <!-- 第一行 -->
    <use href="#carrot-shape"/>
    <use href="#carrot-shape" x="70"/>
    <use href="#carrot-shape" x="140"/>
    <use href="#carrot-shape" x="210"/>
    <use href="#carrot-shape" x="280"/>
    <use href="#carrot-shape" x="350"/>
    <use href="#carrot-shape" x="420"/>
    <use href="#carrot-shape" x="490"/>
    
    <!-- 第二行 -->
    <use href="#carrot-shape" y="60"/>
    <use href="#carrot-shape" x="70" y="60"/>
    <use href="#carrot-shape" x="140" y="60"/>
    <use href="#carrot-shape" x="210" y="60"/>
    <use href="#carrot-shape" x="280" y="60"/>
    <use href="#carrot-shape" x="350" y="60"/>
    <use href="#carrot-shape" x="420" y="60"/>
    <use href="#carrot-shape" x="490" y="60"/>
    
    <!-- 第三行 -->
    <use href="#carrot-shape" y="120"/>
    <use href="#carrot-shape" x="70" y="120"/>
    <use href="#carrot-shape" x="140" y="120"/>
    <use href="#carrot-shape" x="210" y="120"/>
    <use href="#carrot-shape" x="280" y="120"/>
    <use href="#carrot-shape" x="350" y="120"/>
    <use href="#carrot-shape" x="420" y="120"/>
    <use href="#carrot-shape" x="490" y="120"/>
  </g>
</svg>

方案优势 #

1. 同步缩放：缩放整个SVG时，所有胡萝卜图形会同步缩放
2. 可编辑性：在Illustrator中，可选中单个或多个胡萝卜修改颜色；双击<use>元素可进入组编辑模式修改图形路径
3. 跟随移动：移动整个SVG时，所有图案元素会完全跟随

内容的提问来源于stack exchange，提问作者Hesper