Bitmap image as background for path in SVG

There is a task to set the value .test {fill: url(image.png)} for <path class="test" d="... ..." />

Google is already seething with my queries on this topic. I tried both clippath and mask but for some reason it does not work. Can you tell me what I'm doing wrong or how to solve this problem?

Author: Alexandr_TT, 2016-10-12
Source

2 answers

I tried both clippath and mask, but for some reason it does not come out. Tell me what is not so I do or how to solve this problem?

ClipPath

Imagine that you have a sheet with a picture, you put a template on it and cut it out with a knife according to the template. You discard all unnecessary things and use only the cut-out part of the image.
This is how clippath works. The template is the SVG shape 

<clipPath id="clip-ff" clipPathUnits="objectBoundingBox">
      <polygon points="0.2, 0.1 0.7,0.2 1,1 0,1.8"></polygon>
    </clipPath>

Next, you specify a link to the image from which you cut out the shape of. 

<image xlink:href="http://placeimg.com/300/400/any" clip-path="url(#clip-ff)" width="400" height="400"> </image>

Note that the SVG tag <clipPath> is used here as a CSS property clip-path="url(#clip-ff)" 

<html> 
<div id="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" >

  <defs>
    <clipPath id="clip-ff" clipPathUnits="objectBoundingBox">
      <polygon points="0.2, 0.1 0.7,0.2 1,1 0,1.8"></polygon>
    </clipPath>
  </defs>
  <image xlink:href="http://placeimg.com/300/400/any" clip-path="url(#clip-ff)" width="400" height="400"> </image>
</svg> 
</div>
</html>

UPD 26.11.2017

Example of SVG clipPath for the design of the site header 

.banner_1 {
  min-height: 100px;
  background-color: #41dddb;
 
}
.banner_2 {
  background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hawaii-beach.jpg);
   background-size:cover;
}
<div class="banner_1">
</div>

<div class="banner_2">
    <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet"> 
	<defs>
	<clipPath id="svgPath" >
	<path d="M0,20 C100,80 350,0 500,30 L500,00 L0,0 Z" style="stroke: none; fill:red;"/> 
  </clipPath>
	</defs>
	
	<rect width="100%" height="100%" fill="#41dddb"  clip-path="url(#svgPath)"
	
        
    </svg>
</div>

Mask

The principle of operation here is different in contrast to clipPath.

A mask is a stencil through which you look at the drawing, then. what do you see through the stencil will be displayed on the screen. Any svg shape can be used as a stencil: rect, polygon, polyline, circle, ellipse, pathor a combination of them.

The mask must be hidden in the<defs> {[25 section before applying it]} 

 <defs>
    <mask id="cat"/>
      <path d="m43 60.9-20.2 ..../>
   </mask>
</defs>

Next, the mask is applied to the bitmap image: 

 <image x="-50" y="0" width="250" height="250"
 xlink:href="http://placeimg.com/300/400/any"
 mask="url(#cat)">
 </image>

Below is the code for using the mask:

<html>
 <div  class="container">
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
    	    width="400" height="400" viewBox="0 0 250 250">

    <defs>
 	<mask id="cat">
		<g transform="scale(2)" > 	 
    <path d="m43 60.9-20.2 0C17.5 61 16.7 60.6 14 56.3L3.9 38.1C1.6 33 1.5 32.9 4 28.5L14.8 10c0 0 1.3-2.4 2.6-3.1 1.4-0.8 4.6-0.7 4.6-0.7l21.1 0.1c6.1-0.1 5.5 0.7 8.1 4.4L61.6 28.6c1.9 4.3 2.5 4.8 0.4 9.3L51.9 55.7C49.5 61 48.5 60.9 43 60.9Z"
    	style="fill:white;stroke-width:1;stroke:white"/>
    </g> 
    </mask> 
   </defs>
 <image x="-50" y="0" width="250" height="250"
 xlink:href="http://placeimg.com/300/400/any"
 mask="url(#cat)">
 </image>	
	</svg>
	</div>
</html>

Note that you must specify the fill color masks: 

style="fill:white;stroke-width:1;stroke:white"

White - full transparency, black-the mask is opaque. Other mask fill colors will work like the opacity property. For example: gray color-gives translucency.

Combination mask

It consists of two SVG shapes:

  1. of a rectangle (rect) whose fill color is different from white and black and so we get a semi-transparent background area.

  2. Path-hexagon with white color the fill - in area is completely transparent.

    1. The outline (stroke) of the hexagon is a shade of gray. 

 <div  class="container">
<svg version="1.1"
 baseProfile="full"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
	    width="400" height="400" viewBox="0 0 250 250">

<defs>
 	<mask id="cat">
<rect width="200" height="200" fill="darkslateblue"/>
<g transform="scale(2)" > 	 
<path d="m43 60.9-20.2 0C17.5 61 16.7 60.6 14 56.3L3.9 38.1C1.6 33 1.5 32.9 4 28.5L14.8 10c0 0 1.3-2.4 2.6-3.1 1.4-0.8 4.6-0.7 4.6-0.7l21.1 0.1c6.1-0.1 5.5 0.7 8.1 4.4L61.6 28.6c1.9 4.3 2.5 4.8 0.4 9.3L51.9 55.7C49.5 61 48.5 60.9 43 60.9Z"
	style="fill:white;stroke-width:4;stroke:#AFACAA"/>
</g> 

</mask> 
   </defs>
  <image x="-50" y="0" width="250" height="250"
 xlink:href="http://placeimg.com/300/400/any"
 mask="url(#cat)">
 </image>	
</svg>
</div>
</html>

In more detail, with examples, - Practical examples of using svg masks

 5
Author: Alexandr_TT, 2019-01-12 09:15:42

Perhaps only through defs and inline:

<svg id="github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <defs>
      <pattern id="image" patternUnits="userSpaceOnUse" width="100" height="100">
        <image x="0" y="0"  width="100" height="100"  xlink:href="http://cdn1.bestpsdfreebies.com/wp-content/uploads/2014/10/Polygonal_Textures_2.jpg"></image>
      </pattern>
    </defs>
  
   <path fill="url(#image)" 
         id="github-path" 
         d="M10.346,25.633c1.329-0.332,3.136-0.784,6.303-0.868c-0.087-0.175-0.167-0.356-0.237-0.543 c-1.232-0.01-5.027,0.165-6.327,0.486c-0.007,0.002-0.015,0.003-0.023,0.003c-0.043,0-0.083-0.03-0.094-0.074 c-0.012-0.051,0.019-0.104,0.072-0.118c1.288-0.318,4.991-0.495,6.302-0.491c-0.295-0.869-0.425-1.863-0.425-2.973 c0-1.973,0.614-2.716,1.439-3.767c-0.631-2.248,0.226-3.784,0.226-3.784s1.326-0.275,3.833,1.52c1.359-0.582,4.98-0.63,6.694-0.129 c1.053-0.695,2.977-1.682,3.753-1.406c0.209,0.338,0.662,1.325,0.274,3.493c0.264,0.475,1.633,1.488,1.639,4.35 c-0.022,1.056-0.132,1.947-0.335,2.701c3.268-0.028,5.19,0.242,6.515,0.486c0.053,0.011,0.087,0.061,0.078,0.113 c-0.01,0.047-0.051,0.08-0.096,0.08c-0.006,0-0.012-0.001-0.019-0.001c-1.321-0.245-3.248-0.513-6.535-0.483 c-0.058,0.191-0.122,0.373-0.192,0.546c1.12,0.037,4.192,0.157,6.698,0.923c0.052,0.017,0.08,0.07,0.064,0.123 c-0.013,0.041-0.052,0.067-0.093,0.067c-0.009,0-0.019-0.001-0.028-0.005c-2.541-0.776-5.68-0.882-6.725-0.917 c-0.908,1.997-2.772,2.742-5.785,3.051c0.977,0.615,1.257,1.387,1.257,3.472c0,2.087-0.029,2.367-0.022,2.847 c0.011,0.787,1.164,1.164,1.121,1.417s-0.964,0.213-1.396,0.062c-1.222-0.425-1.099-1.44-1.099-1.44l-0.042-2.79 c0,0,0.085-1.502-0.471-1.502c0,0.303,0,3.487,0,4.566c0,0.991,0.694,1.294,0.694,1.66c0,0.631-1.269-0.06-1.659-0.453 c-0.596-0.598-0.528-1.867-0.513-2.87c0.013-0.97-0.009-3.089-0.009-3.089L24.779,29.9c0,0,0.166,4.631-0.213,5.475 c-0.491,1.083-1.97,1.455-1.97,0.962c0-0.332,0.365-0.226,0.566-0.97c0.172-0.633,0.114-5.354,0.114-5.354s-0.475,0.28-0.475,1.165 c0,0.404-0.011,2.716-0.011,3.404c0,0.865-1.229,1.357-1.82,1.357c-0.298,0-0.671-0.015-0.671-0.174 c0-0.399,1.124-0.634,1.124-1.467c0-0.722-0.016-2.579-0.016-2.579s-0.566,0.097-1.375,0.097c-2.038,0-2.682-1.3-2.988-2.027 c-0.399-0.948-0.917-1.393-1.467-1.749c-0.337-0.219-0.415-0.477-0.024-0.55c1.804-0.34,2.265,2.046,3.469,2.426 c0.86,0.271,1.965,0.154,2.515-0.201c0.073-0.729,0.598-1.36,1.035-1.69c-3.063-0.294-4.88-1.359-5.821-3.069 c-3.205,0.077-5.023,0.532-6.357,0.865c-0.097,0.024-0.192,0.048-0.283,0.071c-0.008,0.002-0.016,0.002-0.024,0.002 c-0.043,0-0.083-0.029-0.094-0.073c-0.013-0.052,0.02-0.104,0.071-0.118C10.155,25.681,10.25,25.658,10.346,25.633z"/>
</svg>
 4
Author: HamSter, 2016-10-12 15:48:39