javascript - 在 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/文件夹，images在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>

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

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