svg 경로에 여러 이미지 삽입

Question

배경색을 포함하여 여러 이미지를 삽입하고 싶습니다.

<defs> 
    <pattern id="img1" patternUnits="userSpaceOnUse" width="1280" height="15"> 
     <image xlink:href="images/l1gloss.png" x="0" y="0" width="1280" height="15" /> 
    </pattern> 
</defs> 

<path id="curve" style="fill:#990000 url(#img1)" d="M1279.919,13c0,0-612.618,21.562- 816.925,22.298C347.224,35.715,0,26,0,26V13c0,0,347.981,9.71,464.005,9.287C668.059,21.542,1279.919,0,1279.919,0V13z" filter="url(#f1)" stroke="none"> </path> 

그러나 검은 색 곡선을 나타낸다. 하지만 채우기 색상이나 스타일에서 # img1을 제거하면 작동합니다. 이제 곡선 경로에서 채우기 색과 #img를 모두 사용하려고합니다. 도와주세요.

Answer 1

색상과 패턴으로 경로를 채울 수 없습니다. 두 가지 경로를 만들어이 작업을 수행 할 수 있습니다. 배경색이있는 경로는 다른 경로의 뒤에 있어야합니다.

<path class="curve" style="fill:#990000" d="M1279.919,13c0,0-612.618,21.562- 816.925,22.298C347.224,35.715,0,26,0,26V13c0,0,347.981,9.71,464.005,9.287C668.059,21.542,1279.919,0,1279.919,0V13z" filter="url(#f1)" stroke="none"> </path> 
<path class="curve" style="url(#img1)" d="M1279.919,13c0,0-612.618,21.562- 816.925,22.298C347.224,35.715,0,26,0,26V13c0,0,347.981,9.71,464.005,9.287C668.059,21.542,1279.919,0,1279.919,0V13z" filter="url(#f1)" stroke="none"> </path> 

Answer 2

다음과 같이 rect를 사용하여 배경색을 패턴에 결합하십시오. (BTW 당신은 ​​위의 샘플 코드에서 참조되지 않은 필터 (F1)를 - 그리고 당신은 당신의 이미지의 가로 세로 비율 동작 지정하지 않은 - 아래 수정)

<svg width="100%" height="100%" viewBox= 
0 0 2000 2000""> 
    <defs> 
    <pattern id="img1" patternUnits="userSpaceOnUse" width="1280" height="15"> 
     <rect fill="#ff0000" x="0" y="0" width="1280" height="15"/> 
     <image xlink:href="http://asia.olympus-imaging.com/products/dslr/e520/sample/images/sample_03.jpg" x="0" y="0" width="1280" height="15" preserveAspectRatio="xMinYMin meet"/> 

    </pattern> 
</defs> 

<path id="curve" d="M1279.919,13 c0,0 -612.618,21.562 -816.925,22.298C347.224,35.715,0,26,0,26V13c0,0,347.981,9.71,464.005,9.287C668.059,21.542,1279.919,0,1279.919,0V13z" fill="url(#img1)" stroke="none"> </path> 

</svg>