SVG에서 규모에 관계없이 반복되는 배경 이미지

질문이 있습니다. 누군가 도와 줄 수 있기를 바랍니다. 내가 찾고있는 것은 SVG 이미지에서 CSS 속성 background-repeat과 동일한 것이다. 채우기로 반복되는 래스터 이미지를 얻기위한 해킹이 있습니까? 요점은 내가 웹 사이트를 디자인하고 SVG 그래픽을 실험하여 확장 성을 높이려는 것입니다. 따라서 사용자가 모든 것을 완벽하게 선명하게 유지할 때. 그러나 "거친"래스터 텍스처가 필요합니다. 이제 래스터 이미지를 Illustrator에서 텍스처로 적용하고 SVG로 저장하면 텍스처가 파일과 함께 확대되고 미묘한 입자가 픽셀 블록이됩니다. 이제 확대/축소 대신 이미지를 반복 할 가능성을 찾고 있습니다. 누구든지 이것을 달성하기 위해 해킹을 알고 있습니까?SVG에서 규모에 관계없이 반복되는 배경 이미지

내가 생각한 또 다른 가능성은 SVG에서 래스터 이미지를 가져 와서 CSS를 통해 배경으로 적용하는 것입니다. 불행히도 배경 이미지가 CSS 또는 JavaScript를 통해 확대되는 것을 방지 할 수있는 방법이 없습니다. 컨텐츠 요소에 대해 그렇게하는 사람들은 분명히 접근성에 나설 것이므로 완벽합니다.

출처

2012-01-19 Pascal

SVG Patterns을 참조하십시오. patternUnits 및 patternContentUnits을 사용하여 확대/축소 독립적 인 동작을 수행 할 수 있지만이를 확인하지는 않았다고 생각합니다.

출처

2012-01-19 20:14:51 Phrogz

나는 백분율 대신에 ems에 설정된 배경 크기 값을 사용하여이 작업을 할 수있었습니다. 나는 더 큰 크기 (30px x 90px)로 SVG를 만들고 ems를 사용하여 SVG를 내 타겟 크기로 확장했습니다.

body { 
    font-size: 15px; 
    background: #fff url(stripe_pattern.svg) repeat-x left top; 
    -webkit-background-size: 0.5em, 0.5em; 
    -moz-background-size: 0.5em, 0.5em; 
    -o-background-size: 0.5em, 0.5em; 
    background-size: 0.5em, 0.5em; 
}

적어도 최신 브라우저에서 작동합니다. IE는 래스터 버전으로 돌아갈 수 있습니다.

출처

2012-01-20 06:10:52 atparkweb

SVG에서 규모에 관계없이 반복되는 배경 이미지

답변

관련 문제