문제 설명
그룹을 번역할 때 이미지가 포함된 SVG 채우기가 작동하지 않음 (SVG fill with image not working when translate the group)
fill="url(#mobile)"이 <이미지 xlink:href="http://placehold.it/52.83x69.15" 너비="22.89" 높이="35.52" x="123" y="90" /><;/패턴>
<svg viewBox="0 0 198 138" xmlns="http://www.w3.org/2000/svg">
<!‑‑ <svg width="198" height="138" viewBox="0 0 198 138" xmlns="http://www.w3.org/2000/svg"> ‑‑>
<defs>
<pattern id="desktop" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="http://placehold.it/170x93" width="170" height="93" x="6" y="6" />
</pattern>
<pattern id="tablet" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="http://placehold.it/52.83x69.15" width="52.83" height="69.15" x="141.53" y="54" />
</pattern>
<pattern id="mobile" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="http://placehold.it/52.83x69.15" width="22.89" height="35.52" x="123" y="90" />
</pattern>
</defs>
<g>
<path d="M182 0v105h‑73v9.406l9 5.594v2H65.02v‑2l8.996‑5.594V105H0V0h182zM6 6h170v93H6V6z" stroke="#979797" stroke‑width=".1" fill="#FFF" />
<path d="M6 6h170v93H6z" fill="url(#desktop)" />
</g>
<g>
<path d="M169.685 49.77a.41.41 0 0 1 .405.41.41.41 0 0 1‑.405.413h‑3.38a.41.41 0 0 1‑.405‑.412c0‑.226.18‑.41.405‑.41h3.38z" fill="#FFF" />
<path d="M195.162 46h‑54.324c‑1.565 0‑2.838 1.292‑2.838 2.88v80.24c0 1.588 1.273 2.88 2.838 2.88h54.324c1.565 0 2.838‑1.292 2.838‑2.88V48.88c0‑1.588‑1.273‑2.88‑2.838‑2.88zm‑25.472 3.772a.41.41 0 0 1 .405.41.41.41 0 0 1‑.405.413h‑3.38a.41.41 0 0 1‑.404‑.412c0‑.227.18‑.41.405‑.41h3.38zM168 129.874c‑1.194 0‑2.162‑.982‑2.162‑2.195 0‑1.213.968‑2.195 2.162‑2.195s2.162.982 2.162 2.194‑.968 2.194‑2.162 2.194zm26.35‑6.72H141.53v‑69.13h52.823v69.13z"
stroke="#979797" stroke‑width=".1" fill="#FFF" />
<path d="M141.53 54h52.83v69.15h‑52.83z" fill="url(#tablet)" />
</g>
<g transform="translate(123 90)">
<rect stroke="#979797" stroke‑width=".1" fill="#FFF" x="12.1" y="2.1" width="1.82" height=".5" rx="8" />
<path d="M24.77 0H1.23C.552 0 0 .72 0 1.608v44.784C0 47.28.552 48 1.23 48h23.54c.678 0 1.23‑.72 1.23‑1.608V1.608C26 .72 25.448 0 24.77 0zM13 46a2 2 0 1 1 0‑4 2 2 0 0 1 0 4zm11.42‑6H1.53V4.478h22.89V40zM12.27 2.11h1.466c.097 0 .176.103.176.23 0 .126‑.08.23‑.176.23H12.27c‑.1 0‑.178‑.104‑.178‑.23 0‑.127.08‑.23.177‑.23z"
stroke="#979797" stroke‑width=".1" fill="#FFF" />
<path d="M1.53 4.48h22.89V40H1.53z" fill="url(#mobile)" />
</g>
</svg>참조 솔루션
방법 1:
I believe the problem is the pattern's x and y attributes,
check out this snippet:
<svg viewBox="0 0 198 138" xmlns="http://www.w3.org/2000/svg">
<!‑‑ <svg width="198" height="138" viewBox="0 0 198 138" xmlns="http://www.w3.org/2000/svg"> ‑‑>
<defs>
<pattern id="desktop" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="http://placehold.it/170x93" width="170" height="93" x="6" y="6" />
</pattern>
<pattern id="tablet" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="http://placehold.it/52.83x69.15" width="52.83" height="69.15" x="141.53" y="54" />
</pattern>
<pattern id="mobile" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="http://placehold.it/52.83x69.15" width="22.89" height="35.52" x="2" y="7" /><!‑‑x="123" y="90‑‑>
</pattern>
</defs>
<g>
<path d="M182 0v105h‑73v9.406l9 5.594v2H65.02v‑2l8.996‑5.594V105H0V0h182zM6 6h170v93H6V6z" stroke="#979797" stroke‑width=".1" fill="#FFF" />
<path d="M6 6h170v93H6z" fill="url(#desktop)" />
</g>
<g>
<path d="M169.685 49.77a.41.41 0 0 1 .405.41.41.41 0 0 1‑.405.413h‑3.38a.41.41 0 0 1‑.405‑.412c0‑.226.18‑.41.405‑.41h3.38z" fill="#FFF" />
<path d="M195.162 46h‑54.324c‑1.565 0‑2.838 1.292‑2.838 2.88v80.24c0 1.588 1.273 2.88 2.838 2.88h54.324c1.565 0 2.838‑1.292 2.838‑2.88V48.88c0‑1.588‑1.273‑2.88‑2.838‑2.88zm‑25.472 3.772a.41.41 0 0 1 .405.41.41.41 0 0 1‑.405.413h‑3.38a.41.41 0 0 1‑.404‑.412c0‑.227.18‑.41.405‑.41h3.38zM168 129.874c‑1.194 0‑2.162‑.982‑2.162‑2.195 0‑1.213.968‑2.195 2.162‑2.195s2.162.982 2.162 2.194‑.968 2.194‑2.162 2.194zm26.35‑6.72H141.53v‑69.13h52.823v69.13z"
stroke="#979797" stroke‑width=".1" fill="#FFF" />
<path d="M141.53 54h52.83v69.15h‑52.83z" fill="url(#tablet)" />
</g>
<g transform="translate(123 90)">
<rect stroke="#979797" stroke‑width=".1" fill="#FFF" x="12.1" y="2.1" width="1.82" height=".5" rx="8" />
<path d="M24.77 0H1.23C.552 0 0 .72 0 1.608v44.784C0 47.28.552 48 1.23 48h23.54c.678 0 1.23‑.72 1.23‑1.608V1.608C26 .72 25.448 0 24.77 0zM13 46a2 2 0 1 1 0‑4 2 2 0 0 1 0 4zm11.42‑6H1.53V4.478h22.89V40zM12.27 2.11h1.466c.097 0 .176.103.176.23 0 .126‑.08.23‑.176.23H12.27c‑.1 0‑.178‑.104‑.178‑.23 0‑.127.08‑.23.177‑.23z"
stroke="#979797" stroke‑width=".1" fill="#FFF" />
<path d="M1.53 4.48h22.89V40H1.53z" fill="url(#mobile)" />
</g>
</svg>_D3/SVG: 범위를 수정하여 시간 척도로 d3.svg.axis의 크기를 조정하는 방법은 무엇입니까? (D3/SVG: How to resize a d3.svg.axis with time scale by modifying range?)){kind=link}
_snap.svg에서 그룹의 요소/자식을 반복하는 방법은 무엇입니까? (How to iterate on a group's elements/children in snap.svg?)){kind=link}