1

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

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

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

事实上，通过这种方法，我得到了正确的填充。如果检查元素，我可以看到在rect元素fill中指定了属性，并且它引用了svg's中定义的模式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'asrect属性，矩形正确渲染为红色边框，但填充为纯黑色。

一些进一步的观察：

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

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

有没有人有类似的经历？

4

1 回答 1

2

在 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>

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

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

于 2012-08-25T06:49:55.817 回答