在 Raphael 中通过 CSS 控制矩形的填充

Question

我正在使用 Raphael，我想创建一个矩形并通过 CSS 控制填充属性。

当我以经典方式设置填充属性时，一切正常：

    space = paper.rect(0,0,1000,500).attr({fill: "url('img/cell_background.png')"});

事实上，通过这种方法，我得到了正确的填充。如果检查元素，我可以看到在rect 元素中指定了fill 属性，它引用了svg 的defs 中定义的模式。

<svg>
   ...
   <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); ">
        <pattern style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); " 
         id="E6992022-9B75-4D1E-9D44-6EC45CE420A1" x="0" y="0" 
         patternUnits="userSpaceOnUse" height="5" width="9" 
         patternTransform="matrix(1,0,0,1,0,0) translate(0,0)">
           <image style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); " 
                      x="0" y="0" 
                  href="img/cell_background.png" width="9" height="5">
               </image>
        
            </pattern>
      </defs>
      <rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); " 
        x="0" y="0" width="1000" height="500" r="0" rx="0" ry="0" 
    fill="url(#E6992022-9B75-4D1E-9D44-6EC45CE420A1)" stroke="#000" 
    class="space">
      </rect>
    ...
</svg>

如果我改为使用以下代码创建rect：

space = paper.rect(0,0,1000,500);
space.node.setAttribute("class","space");

然后在我定义的 .css 中：

.space {
fill: url('img/cell_background.png');
stroke: #ff0000;
}

然后检查的html显示fill='none'作为rect属性，矩形正确渲染为红色边框，但填充为纯黑色。

一些进一步的观察：

1. js在js/文件夹，css在css/文件夹，图片在img/文件夹。我尝试使用 '../img'、'./img' 和 'img' 但我的行为相同；
2. 如果我不添加填充物，我会得到预期的白色填充物；
3. 如果我输入fill: foobar，我将获得白色背景；
4. 如果我输入fill: #ff0000，我会得到预期的红色背景；
5. 如果我使用假文件名，我会得到相同的黑色背景；
6. 该行为与 Chrome 和 Firefox 一致。

从第四点和第五点开始，似乎找不到文件，但我认为已经用尽了我应该检查的路径组合（css 使用 '../img 在同一文件夹中找到其他图像' 小路）。我认为问题出在其他地方。

有人有类似经历吗？

Answer 1

在 SVG 中，您不能像处理 HTML 元素那样只为元素指定位图背景 url。在 SVG 中执行此操作的标准方法是通过 pattern 定义。 Raphael 用一个简单的fill: url(...) 将这种混乱从你身上抽象出来。

您可以使用 CSS 样式表加载模式，例如...

.space {
  fill: url('img/cell_background.svg#bitmap');
  stroke: #ff0000;
}

当然，cell_background.svg#bitmap 仍然需要看起来像......

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
        <pattern id="bitmap" x="0" y="0" patternUnits="userSpaceOnUse" height="5" width="9">
           <image x="0" y="0" xlink:href="img/cell_background.png" width="9" height="5">
           </image>
         </pattern>
    </defs>
</svg>

当然，这只会让事情变得更复杂。

您的矩形显示为黑色的原因是引擎正在尝试加载默认为黑色的缺失填充定义（渐变或图案）。