SVG 이미지가 사각형 또는 원형으로 표시됩니다.

나는 왜 코드가 작동하지 않는지에 대한 이유를 찾기 위해 stackoverflow와 google을 검색했습니다. 원에 대한 채우기로 이미지를 배치하려하지만 검정으로 표시됩니다. 여기에 내가 가진 것이있다. SVG 이미지가 사각형 또는 원형으로 표시됩니다.

<svg width="100%" height="99%"> 
    <defs> 
     <pattern id="tile-ww" x="0" y="0" patternunits="userSpaceOnUse" width="24" height="24">  
      <img xlink:href="distributor-sprite.png" width="24" height="24" x="0" y="0"> 
     </pattern> 
     <pattern id="tile-us" x="0" y="0" patternunits="userSpaceOnUse" width="24" height="24"> 
      <img xlink:href="distributor-sprite.png" width="24" height="24" x="0" y="0"> 
     </pattern> 
    </defs> 

    <g id="stage" transform="translate(80,10)"> 
     <g class="node" transform="translate(380,44.375)"> 
      <rect class="name" ry="3" rx="3" height="15" x="-32" width="32"></rect> 
      <circle r="54.5" id="circle-4" fill="url(#tile-ww)"></circle> 
      <text id="text-4" x="-10" dy=".35em" text-anchor="end" z="1">Jon</text> 
     </g> 
    </g> 
</svg>

는 또한 CSS로하지만 아무 소용이

.node circle { 
    cursor: pointer; 
    stroke: #282828; 
    stroke-width: 1.5px; 
    fill: url(#tile-ww); 
}

내가 더블, 트리플 이미지가 올바른지 확인이에 패턴을 적용 노력했다. 나는 상대 경로와 절대 경로를 시도했지만 운은 없다.

출처

2012-10-05 brenjt

<img /> 대신 <image />을 사용하고 pattern 개입니다. 나를 위해 일했다!

<img>은 HTML5 사양 요소이고 <image>은 SVG 사양의 일부입니다. 더 많은 정보는 여기에있다 : http://www.w3.org/TR/SVG/struct.html#ImageElement

출처

2012-10-05 18:12:07

무엇을 ... 나는 자바 스크립트와 문자열에 ''이지만 동적으로 패턴 정의를 추가하고 있는데, DOM은 ''으로 바뀌고있다. 좋은 캐치 – brenjt

SVG 이미지가 사각형 또는 원형으로 표시됩니다.

답변

관련 문제