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

Popular posts from this blog

magento2 - Magento 2 admin grid add filter to collection -

Android volley - avoid multiple requests of the same kind to the server? -

Combining PHP Registration and Login into one class with multiple functions in one PHP file -