이미지가 작동하지 않는 SVG 다각형 채우기

Question

이전에이 기능이 있었지만 어떤 이유로 내 패턴이 전혀 작동하지 않는 것 같습니다.

나는이 작업을 수행하기 위해 모든 방법을 시도했지만 단색으로 완벽하게 작동하지만 패턴을 사용하려고하면 투명 해집니다.

새로운 SVG 패턴 샘플을 사용하기 시작 했는데도 여전히 작동하지 않았습니다.

SVG 코드

<svg width="100" height="100"> 
    <defs> 
    <pattern id="image" patternUnits="userSpaceOnUse" height="100" width="100"> 
     <image x="0" y="0" height="100" width="100" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image> 
    </pattern> 
    </defs> 
    <circle id='top' cx="50" cy="50" r="50" fill="url(#image)"/> 
</svg> 

이것은 단지 투명한 원을 보여줍니다. 여기있는 모든 것은 내가 아는 바로는 'CSS'에 영향을주는 '이미지', '패턴'또는 '원'요소가 없습니다.

크롬 + 파이어 폭스에서 문제가 발생하므로 페이지에 코드 문제 또는 기타 문제가 있는지 확인하십시오.

가 여기서 일하는려고 :

첫 번째 옷장 문 http://www.slidingwardrobesexpress.co.uk/index.php?dispatch=wardrobe_tool.step1은 어두운 붉은 이미지로 가득해야합니다.

아이디어가 있으십니까? 채울 패턴이 주어 졌을 때 SVG 패턴에 대한 다른 언급을 찾을 수 없습니다.

내 실제 라이브 코드는 다음과 같습니다

<defs> 
<pattern id="img-lacobel_darkred" patternUnits="userSpaceOnUse" width="50" height="50" ><image xlink:href="/{$img_path}/lacobel_aluminiumrich.jpg" x="0" y="0" /></pattern> 
</defs> 
<polygon class="svgDoor1 D1S1" id="D1S1P1" points="8,12 131,41 131,415 8,428" fill="url(#img-lacobel_darkred)" style="stroke:black;stroke-width:1" /> 

Answer 1

귀하의 실제 라이브 코드는 폭 부족과 높이가 <image> 요소에 속성. SVG 1.1에서 이러한 기본값 (오히려 도움이 됨)은 0으로 설정됩니다.

<base> 태그를 사용하면 기본으로 모든 조각 식별자 (예 : # 기호)가 앞에 추가되므로 모든 참조를 분리하는 훌륭한 방법입니다. <base> 태그를 제거하면 테스트 케이스가 사이트에서 작동합니다. <base> 태그가 실제로 필요하다면 모든 URL을 절대적으로 만드는 것과 같은 다른 솔루션이 있습니다.