배경 이미지로 SVG 경로 요소 채우기

166

background-imageSVG <path>요소에 대해 를 설정할 수 있습니까?

예를 들어 element를 설정하면 class="wall"CSS 스타일이 .wall {fill: red;}작동하지만 작동 .wall{background-image: url(wall.jpg)}하지 않습니다 .wall {background-color: red;}.

— bo 치
소스

선택적으로 문자 단위로 SVG 텍스트의 배경 이미지를 설정하는 방법을 보여주는 방법 : stackoverflow.com/a/10853878/405017

— Phrogz

더 자세한 정보를 원하시는 분들은이 기사 링크를

— Paulo Bueno

261

배경을 패턴 으로 만들어서 할 수 있습니다 .

<defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
    <image xlink:href="wall.jpg" x="0" y="0" width="100" height="100" />
  </pattern>
</defs>

이미지에 따라 너비와 높이를 조정 한 후 다음과 같이 경로에서 참조하십시오.

<path d="M5,50
         l0,100 l100,0 l0,-100 l-100,0
         M215,100
         a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
         M265,50
         l50,100 l-100,0 l50,-100
         z"
  fill="url(#img1)" />

작업 예

— 로버트
소스

아주 좋습니다, base64 이미지에서도 작동합니까? data:image/png;base64,iVBORw0KGgoAA일반적인 CSS에서 와 같이 wall.jpg 대신에 ?

— Christoph

@Christoph 나는 모른다, 그것을 시도하고 참조하십시오.

— robertc

@ robertc 시도했지만 작동하지 않았지만 중복 스타일 요소가 있습니다. 그것을 제거함으로써, 그것은 잘 작동했습니다;)

— Christoph

@ robertc : 귀하의 답변에 관한 질문이 있습니다. 패턴은 글로벌 좌표 (0,0)에서 시작합니다. 패턴이 연결된 객체의 로컬 좌표계를 사용하도록 할 수 있습니까? svg의 다른 위치에 rect를 그리고 싶습니다. 구멍 배경에서 패턴이 반복되고 객체가 마스크로 사용됩니다.

— Tobias Golbs

@robertc xlink:hrefSVG 2부터 사용되지 않고 href지금 사용하기 위해 답변을 업데이트하십시오 . developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

— Blake Regalia