Question

我使用Raphael，我想创建一个rect并通过CSS控制fill属性。

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

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

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

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

然后在.css中定义：

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

然后检查的html显示.space { fill: url('img/cell_background.png'); stroke: #ff0000; }为fill='none'属性，矩形正确呈现红色边框，但它填充了纯黑色。

进一步的观察：

js位于js /文件夹中，css位于css /文件夹中，图像位于img /文件夹中。我尝试使用'../img'，'。/ img'和'img'，但我有相同的行为;
如果我没有填充，我会按预期获得白色填充物;
如果我放rect我获得白色背景;
如果我放fill: foobar我得到预期的红色背景;
如果我使用伪文件名，我会获得相同的黑色背景;
此行为与Chrome和Firefox一致。

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

有没有人有类似的经历？

Answer 1

在SVG中，您不能像处理HTML元素一样为元素指定位图背景URL。在SVG中执行此操作的标准方法是通过pattern定义。拉斐尔用一个简单的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>

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

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

在Raphael中通过CSS控制rect的填充

1 个答案: