How to Use a Background Image on the Stroke of an Svg Element

Is it possible to use a background image on the stroke of an SVG element?

You can use a <pattern> as a stroke e.g.

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">      <defs>        <pattern id="p1" patternUnits="userSpaceOnUse" width="32" height="32">          <image xlink:href="http://phrogz.net/tmp/alphaball-small.png" width="32" height="32" />        </pattern>      </defs>      <rect stroke-width="32" stroke="url(#p1)" width="200" height="200" fill="none"/>    </svg>

How can I make a SVG stroke show a background?

A more conventional approach would be to use a <mask>:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 276 260" width="276" height="260">
  <defs>
    <mask id="mask" stroke-width="4" stroke="#000">
      <g transform="translate(30 30)">
        <path id="shapeBG" d="M108 0 L216 54 L216 103 L162 130 L162 152 L135 166 L135 187 L108 200 L82 187 L82 166 L54 152 L54 130 L0 103 L0 54 Z" fill="#fff" />
        <g fill="none">
          <polyline points="82 166, 108 179, 135 166" />
          <polyline points="54 130, 108 157, 162 130" />
          <polyline points="0 54, 108 108, 216 54" />
          <polyline points="49 78.5, 108 49, 167 78.5" />
          <line x1="108" y1="0" x2="108" y2="49" />
          <line x1="108" y1="200" x2="108" y2="108" />
        </g>
      </g>
    </mask>
    <filter id="shadow" x="0" y="0" width="276" height="260">
      <feGaussianBlur in="SourceAlpha" out="blurOut" stdDeviation="32" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect id="bg" x="0" y="0" width="100%" height="100%" fill="#c41313" stroke="none" />
  <g filter="url(#shadow)">
    <rect x="0" y="0" width="100%" height="100%" mask="url(#mask)" fill="rgb(95,95,95)" />
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -30 276 260" width="276" height="260">
  <g id="mask" stroke-width="4" stroke="#000">
    <path id="shapeBG" d="M108 0 L216 54 L216 103 L162 130 L162 152 L135 166 L135 187 L108 200 L82 187 L82 166 L54 152 L54 130 L0 103 L0 54 Z" fill="#fff" />
    <g fill="none">
      <polyline points="82 166, 108 179, 135 166" />
      <polyline points="54 130, 108 157, 162 130" />
      <polyline points="0 54, 108 108, 216 54" />
      <polyline points="49 78.5, 108 49, 167 78.5" />
      <line x1="108" y1="0" x2="108" y2="49" />
      <line x1="108" y1="200" x2="108" y2="108" />
    </g>
    <text style="font-size:11; font-family:Arial, sans-serif" stroke-width="0" x="0" y="80%" dominant-baseline="middle">Mask: white fills/strokes=opaque; <tspan x="0" dy="12">black fills/strokes=transparent<tspan></text>
</svg>

Add background image in SVG

Correct a syntax error in the path, you are missing a " at the end and remove fill:none from CSS that is overriding the fill attribute used with the path:

Full code:

path {  stroke: #000;  stroke-width: 3px;  stroke-linejoin: round;  stroke-linecap: round;}

<svg width="1000" height="700">    <!-- <rect fill="#fff" width="100%" height="100%"></rect> -->
    <defs>        <pattern id="img1" patternUnits="userSpaceOnUse" x="0" y="0" width="1000" height="700">                    <image xlink:href="https://lorempixel.com/600/450/" width="600" height="450" />                         </pattern>    </defs>    <path d="M5,5        l0,680 l980,0 l0,-680 l-980,0"                  fill="url(#img1)" /></svg>

SVG as background image inlined in style attribute

Use HTML escapes inside the attribute value: " for a double quote, and (in this case not necessary, but if the need arises) ' for a single quote.

<div  style="background-image: url('data:image/svg+xml;charset=utf8,<svg width="30" height="25" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg" version="1.1"><path d="M3 14.0204L10.8806 21L27 3" stroke="%231CDFAF" stroke-width="5" stroke-linecap="round"/></svg>');"><br style="line-height:25px"></div>

SVG element with background image and background color and drop shadow

Well I don't know how hard you tried on the feImage,. but this code works perfectly. You want to pull in the feImage, then clip it to the source with a feComposite "in". Then you can composite the dropshadow under that result.

<svg>
<defs>

<filter id="dropshadow" width="130%" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="0" dy="4" result="offsetblur"/>
<feComponentTransfer in="offsetblur" result="dropshadow">
<feFuncA type="linear" slope="0.1"/>
</feComponentTransfer>

<feImage result="bgpic" xlink:href="http://www.sencha.com/img/sencha-large.png" /> 
<feComposite operator="atop" in="bgpic" in2="SourceGraphic" result="coikelwimg"/>

<feMerge> 
<feMergeNode in="coikelwimg"/>
<feMergeNode in="dropshadow"/>
</feMerge>
</filter>

</defs>
<circle cx="50%" cy="50%" r="49%" filter="url(#dropshadow)" fill="#f8f8f8" stroke="#e7e7e7" stroke-width="1px"/>

</svg>

Programatically generating an SVG and assigning it to the background-image of an element

Put the contents of url() in single quotes.

background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><line x1="25" y1="25" x2="25" y2="12" stroke="red"/></svg>')

Stripped down example with stroke color

---

Related Topics