Raphael에서 CSS를 통해 rect의 채우기 제어하기

Question

저는 Raphael을 사용하여 rect를 만들고 CSS를 통해 채우기 속성을 제어하려고합니다. 이 방법으로 내가 올바른 충전을 얻을, 사실

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

: 나는 고전적인 방법으로 채우기 ATTR을 설정할 때

모든 것이 잘 작동합니다. 요소를 검사하면 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> 

하지만 물론이의 문제가 더 복잡해집니다.

rect가 검은 색으로 표시되는 이유는 엔진이 부족한 채우기 정의 (그라디언트 또는 패턴)를로드하려고 시도하기 때문입니다. 기본값은 검정색입니다.