Texture mapping bitmap to SVG path -
i have ordinary rectangular bitmap able use fill four-pointed svg path - mapped texture 4 corners of bitmap mapped 4 points of path , rest of image 'warped' accordingly.
i have been able fill svg rect same image , transform rect such bitmap transformed it:
<defs> <pattern id="bmp" x="0" y="0" width="1" height="1"> <image x="0" y="0" width="100" height="100" href="mybmp.bmp"/> </pattern> </defs> <rect x="0" y="0" width="100" height="100" fill="url(#bmp)" stroke="black" transform="skewx(10)"/>
when try use bitmap fill path though gets mapped bounding box of path shape , not 4 points of path itself:
<defs> <pattern id="bmp" x="0" y="0" width="1" height="1"> <image x="0" y="0" width="100" height="100" href="mybmp.bmp"/> </pattern> </defs> <path d="m 0 0 l 100 0 l 120 80 l 50 120 z" fill="url(#bmp)" stroke="black" />
is possible same effect first example (texture mapped corners of rectangle) in arbitrary path shape?
one solution give pattern viewbox
content image gets scaled fit pattern bounds.
<svg> <defs> <pattern id="bmp" x="0" y="0" width="1" height="1" viewbox="0 0 100 100"> <image x="0" y="0" width="100" height="100" xlink:href="http://www.placekitten.com/100/100"/> </pattern> </defs> <path d="m 0 0 l 100 0 l 120 80 l 50 120 z" fill="url(#bmp)" stroke="black" /> </svg>
depending on shape of path, may need set preserveaspectratio="xmidymid slice"
. ensure pattern gets scaled size large enough cover whole path no gaps.
<svg> <defs> <pattern id="bmp" x="0" y="0" width="1" height="1" viewbox="0 0 100 100" preserveaspectratio="xmidymid slice"> <image x="0" y="0" width="100" height="100" xlink:href="http://www.placekitten.com/100/100"/> </pattern> </defs> <path d="m 0 0 l 100 0 l 120 80 l 50 120 z" fill="url(#bmp)" stroke="black" /> </svg>
Comments
Post a Comment