Reputation: 3921

How to make an image scale to fill the space of an SVG path?

I want this image (test.svg) to be appear inside a of another SVG so that it scales to fill the area.

test.svg

<svg viewBox="0 0 2911 2521" xmlns="w3.org/2000/svg">
  <path d="m0 0h2911v2521h-2911z"/>
  <path d="m204.5 367h2502v1787h-2502z" fill="#fff"/>
  <circle cx="1455.5" cy="1260.5" fill="#c00" r="468"/>
</svg>

HTML

<div class="board">
  <svg viewBox="0 0 2500 1250" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="test" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" width="1" height="1">
        <image href="test.svg" x="0" y="0" width="1" height="1" />
      </pattern>
      <clipPath id="hex">
        <path d="m1008 376  211-365h422l211 365-211 365h-422z"/>
      </clipPath>
    </defs>
    <style>
      #h13 {fill: url(#test);}
    </style>
    <g id="parent" stroke="#50731b" stroke-width="20">
      <path id="h13" d="m1008 376  211-365h422l211 365-211 365h-422z"/>
      <path id="h22" d="m376 741   211-365h422l211 365-211 365h-422z"/>
      <path id="h24" d="m1641 741  211-365h422l211 365-211 365h-422z"/>
    </g>
  </svg>
</div>

The above code results in this:

However, I need it to look like this:

Upvotes: 3

Answers (3)

lanpierre

Reputation: 102

Placing the background within a rectangle with the same dimensions as the forefront and matching viewBox works:

A CODE PEN PROJECT with the background as an external file <<<

NOTE: The image bellow is just there for the use method.

Copy it in an empty document and save it as test.svg.

It can then be erased and the use element can be removed.

Then just link the test.svg from wherever you place it.

The image element with the href pointing to test.svg is commented within a group, under the first group in the svg.

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>by Lancelot Pierre Blaine</title>
<style>
</style>
</head>
<body>
<div style="width: 50%; height: 50%;">
<svg id="eff7db96-7c1d-4982-bd80-61bad4582a97" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="185" height="158" viewBox="0 0 185 158" style="width: 100%; height: 100%;">
<defs>
<style>
.a24aad19-bdcd-4532-8371-4f54dd27ccbb, .b83eb350-0558-4ca5-ae05-cca66b3d1863 {
fill: none;
}

.bbfd3ba8-bb9b-40e4-97f5-d0e2ca578bf5 {
fill: #6c942e;
}

.b08cc7ea-c9bc-4979-a114-f4a4495297c6 {
fill: #8ab345;
}

.aeffb10f-58ec-400a-9faa-24ec7e47cca5 {
fill: #5a7231;
}

.a5ba573d-a1cd-48a8-804d-373b52dd7e8f {
fill: #8ab244;
}

.be31fd39-ad64-469e-992a-6102f2eedc17 {
fill: #6b932e;
}

.a24aad19-bdcd-4532-8371-4f54dd27ccbb {
stroke: #5a7231;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 0;
}
</style>
</defs>
<g>
<path class="b83eb350-0558-4ca5-ae05-cca66b3d1863" d="M53.39,133.678c.169.255.33.477.487.693l-.409-.693Z"/>
<path class="b83eb350-0558-4ca5-ae05-cca66b3d1863" d="M56.1,138.138l-.79-1.337A4.639,4.639,0,0,0,56.1,138.138Z"/>
<path class="b83eb350-0558-4ca5-ae05-cca66b3d1863" d="M138.762,119.86l-1.405,2.414C137.844,121.494,138.323,120.7,138.762,119.86Z"/>
<path class="b83eb350-0558-4ca5-ae05-cca66b3d1863" d="M134.764,127.053c.162-.435.351-.858.554-1.274l-2.851,4.9A9.02,9.02,0,0,0,134.764,127.053Z"/>
<path class="b83eb350-0558-4ca5-ae05-cca66b3d1863" d="M138.519,116.844a3.073,3.073,0,0,0,2.653-1.126l3.317-5.7-3.317,5.7a4.978,4.978,0,0,0,.483-.709q5.7-10.1,11.577-20.111a10.286,10.286,0,0,0,1.427-3.917,1.631,1.631,0,0,0,1.225-.726c2.125-3.653,4.273-7.293,6.4-10.944a1.71,1.71,0,0,0,.154-1.679q-3.393-5.922-6.891-11.783c-.13-.219-.587-.244-.892-.358a12.6,12.6,0,0,0-1.014-3.261c-4.028-6.84-7.977-13.727-11.934-20.609a4.4,4.4,0,0,0-1.7-2.039,84.373,84.373,0,0,0-9.045-15.86c-.389-1.911-1.656-3.386-2.5-5.069a2.929,2.929,0,0,0-2.992-1.7q-33.49.067-66.981.036c-.736,0-1.7-.232-2.083.5-1.049,2.027-2.678,3.8-2.865,6.226-.34.228-.815.376-1,.694-2.915,5.015-6.1,9.877-8.536,15.165a10.309,10.309,0,0,0-1.1,1.336c-4.173,7.206-8.315,14.43-12.494,21.632L28.961,66l-.464-.1q-3.229,5.618-6.464,11.232c-.257.444-.532.865-.282,1.386,2.007,4.2,4.575,8.052,7.21,12.591l1.608,2.86.649,1.154-.645-1.145c.044.082.076.166.124.249q6.024,10.352,11.947,20.763c.036.063.073.116.11.175l-.262-.442.262.443a3.159,3.159,0,0,0,3.047,1.687"/>
<path class="bbfd3ba8-bb9b-40e4-97f5-d0e2ca578bf5" d="M0,0V76.485c5.5,0,10.994-.038,16.489.035a2.925,2.925,0,0,0,2.926-1.767Q29.4,57.1,39.505,39.519c4.712-8.2,9.518-16.35,14.222-24.556a2.6,2.6,0,0,1,2.572-1.5q35.727.036,71.455,0a2.651,2.651,0,0,1,2.579,1.525q5.142,8.958,10.36,17.872c4.351,7.439,8.761,14.845,13.09,22.3,2.959,5.094,5.812,10.249,8.736,15.364.945,1.653,2.025,3.231,2.929,4.905.607,1.126,1.556,1.077,2.563,1.076q8.495-.007,16.989-.008V0Z"/>
<path class="b08cc7ea-c9bc-4979-a114-f4a4495297c6" d="M168.017,79.972a2.932,2.932,0,0,0-2.951,1.711q-14.935,26.05-29.98,52.038c-.125.216-.231.443-.358.657-4.966,8.405-4.707,5.421.036,14.035,1.757,3.189,3.823,6.209,5.236,9.587h45V79.986C179.339,79.991,173.677,80.034,168.017,79.972Z"/>
<path class="b08cc7ea-c9bc-4979-a114-f4a4495297c6" d="M52.578,143.218a3.218,3.218,0,0,0,.128-3.876c-5.039-8.6-10.018-17.242-15.007-25.875-6.07-10.5-12.165-20.989-18.154-31.537a3.259,3.259,0,0,0-3.307-1.965c-5.411.087-10.825.025-16.238.021V158H44.5c.323-3.153,2.79-5.219,4.046-7.91A52.782,52.782,0,0,1,52.578,143.218Z"/>
<path class="aeffb10f-58ec-400a-9faa-24ec7e47cca5" d="M165.448,75.417c-.9-1.674-1.984-3.252-2.929-4.905-2.924-5.115-5.777-10.27-8.736-15.364-4.329-7.452-8.739-14.858-13.09-22.3q-5.215-8.916-10.36-17.872a2.651,2.651,0,0,0-2.579-1.525q-35.727.046-71.455,0a2.6,2.6,0,0,0-2.572,1.5c-4.7,8.206-9.51,16.354-14.222,24.556Q29.4,57.1,19.415,74.753a2.925,2.925,0,0,1-2.926,1.767C10.994,76.447,5.5,76.487,0,76.485v3.5c5.413,0,10.827.066,16.238-.021a3.259,3.259,0,0,1,3.307,1.965c5.989,10.548,12.084,21.036,18.154,31.537,4.989,8.633,9.968,17.272,15.007,25.875a3.218,3.218,0,0,1-.128,3.876,52.782,52.782,0,0,0-4.032,6.872c-1.256,2.691-3.723,4.757-4.046,7.91h4c1.93-4.99,5.113-9.29,7.686-13.926.539-.97,1.571-1.074,2.632-1.073q33.373.025,66.746.009c1.021,0,1.919.014,2.537,1.122,2.59,4.647,5.259,9.249,7.9,13.868h4c-1.413-3.378-3.479-6.4-5.236-9.587-4.743-8.614-5-5.63-.036-14.035.127-.214.233-.441.358-.657q15-26.01,29.98-52.038a2.932,2.932,0,0,1,2.951-1.711c5.66.062,11.322.019,16.983.014v-3.5q-8.495,0-16.989.008C167,76.494,166.055,76.543,165.448,75.417ZM30.338,62.677C28.5,65.9,28.354,65.9,28.354,65.9Zm12.416,52.485-.262-.443.262.442c-.037-.059-.074-.112-.11-.175Q36.727,104.573,30.7,94.223c-.048-.083-.08-.167-.124-.249l-1.612-2.869c-2.635-4.539-5.2-8.394-7.21-12.591-.25-.521.025-.942.282-1.386Q25.278,71.52,28.5,65.9h0l1.913-3.355c4.179-7.2,8.321-14.426,12.494-21.632a8.5,8.5,0,0,1,.809-1.349c2.431-5.287,5.909-10.137,8.824-15.152.184-.318,3.07-5.881,3.41-6.109.187-2.424-.6,1.216.454-.811.38-.736,1.347-.5,2.083-.5q33.491-.008,66.981-.036a2.929,2.929,0,0,1,2.992,1.7c.849,1.683,2.116,3.158,2.5,5.069a84.373,84.373,0,0,1,9.045,15.86,4.4,4.4,0,0,1,1.7,2.039c3.957,6.882,7.906,13.769,11.934,20.609a16.617,16.617,0,0,1,1.776,3.4c.305.114,0,0,.13.219q3.49,5.865,6.891,11.783a1.71,1.71,0,0,1-.154,1.679c-2.13,3.651-4.278,7.291-6.4,10.944-.288.5-.251.511-.738.619-.182,1.412-1.188,2.783-1.914,4.024q-5.856,10.017-11.577,20.111a4.978,4.978,0,0,1-.483.709l-2.41,4.142c-.439.835-.918,1.634-1.405,2.414l-2.039,3.5c-.2.416-.392.839-.554,1.274a9.02,9.02,0,0,1-2.3,3.627l-2.679,4.6c-1.079,3.373-2.544,4.207-6.331,4.207-20.969,0-41.939-.042-62.907.054-1.907.008-3.416-.241-4.446-1.408l.022.038-.022-.038a4.639,4.639,0,0,1-.79-1.337l-1.437-2.43c-.157-.216-.318-.438-.487-.693h.078l-1.9-3.22c-2.249-4.23-4.736-8.333-7.312-12.808m95.5,0a17.227,17.227,0,0,1-.994,2.21l2.41-4.142"/>
<path class="aeffb10f-58ec-400a-9faa-24ec7e47cca5" d="M137.357,122.274a40.229,40.229,0,0,0-2.039,3.5Z"/>
<path class="aeffb10f-58ec-400a-9faa-24ec7e47cca5" d="M53.877,134.371l1.437,2.43c-.058-.14-.123-.263-.174-.418A8.045,8.045,0,0,0,53.877,134.371Z"/>
<path class="a5ba573d-a1cd-48a8-804d-373b52dd7e8f" d="M125.564,143.01q-33.373.007-66.746-.009c-1.061,0-2.093.1-2.632,1.073C53.613,148.71,50.43,153.01,48.5,158H136c-2.64-4.619-5.309-9.221-7.9-13.868C127.483,143.024,126.585,143.009,125.564,143.01Z"/>
<path class="be31fd39-ad64-469e-992a-6102f2eedc17" d="M30.338,62.677,28.354,65.9S28.5,65.9,30.338,62.677Z"/>
<path class="be31fd39-ad64-469e-992a-6102f2eedc17" d="M30.569,93.965l-1.608-2.86,1.612,2.869.645,1.145Z"/>
<line class="a24aad19-bdcd-4532-8371-4f54dd27ccbb" x1="53.877" y1="134.371" x2="55.314" y2="136.801"/>
<line class="a24aad19-bdcd-4532-8371-4f54dd27ccbb" x1="53.877" y1="134.371" x2="53.468" y2="133.678"/>
<line class="a24aad19-bdcd-4532-8371-4f54dd27ccbb" x1="56.126" y1="138.176" x2="56.104" y2="138.138"/>
<line class="a24aad19-bdcd-4532-8371-4f54dd27ccbb" x1="51.564" y1="130.458" x2="53.468" y2="133.678"/>
<line class="a24aad19-bdcd-4532-8371-4f54dd27ccbb" x1="56.104" y1="138.138" x2="55.314" y2="136.801"/>
<line class="a24aad19-bdcd-4532-8371-4f54dd27ccbb" x1="135.318" y1="125.779" x2="132.467" y2="130.68"/>
<line class="a24aad19-bdcd-4532-8371-4f54dd27ccbb" x1="144.489" y1="110.017" x2="141.172" y2="115.718"/>
<line class="a24aad19-bdcd-4532-8371-4f54dd27ccbb" x1="132.467" y1="130.68" x2="129.788" y2="135.285"/>
<line class="a24aad19-bdcd-4532-8371-4f54dd27ccbb" x1="138.762" y1="119.86" x2="137.357" y2="122.274"/>
<line class="a24aad19-bdcd-4532-8371-4f54dd27ccbb" x1="135.318" y1="125.779" x2="137.357" y2="122.274"/>
<line class="a24aad19-bdcd-4532-8371-4f54dd27ccbb" x1="141.172" y1="115.718" x2="138.762" y2="119.86"/>
</g>
    <g>

    <!--
    Just take the following out of this comment:
    
    <image href="test.svg" x="0" y="0" width="100%" height="100%" />
  

    Take the SVG bellow with id="test-svg"
    and save it as test.svg in any editor
    place it in different directory 
    (without wrapping div)and link it.
    Keep it inside this group for easier
    manipulation if needed. 

    ####And remove the USE and SYMBOL elements.
    -->

    <use xlink:href="#test-svg" />
    <symbol>
    <rect  x="0" y="0" width="100%" height="100%"/>
    </symbol>

    </g> 
</svg>
</div>


<div style="width: 50%; height: 50%;">
<svg id="test-svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="185.25" height="158.25" viewBox="0 0 185.25 158.25" style="width: 100%; height: 100%;">
<defs>
<style>
.f8a8b876-3fc0-46ed-8a97-f915d88ee936 {
fill: #fdfdfc;
}

.e696fb6a-331d-4674-9c1e-85312f6cdf42 {
fill: #010101;
}

.a1484ab1-7cc7-4f07-a801-284d374b45ef {
fill: #020201;
}

.f4b5ea5a-4c49-4847-8d9b-472ed1ed7495 {
fill: #060705;
}

.a9ec29d3-ed66-4142-94fa-4baf4c9d2d75 {
fill: #040503;
}

.a6fea285-09b9-4de9-a3d2-af5e9e743554 {
fill: #bd2a1d;
}

.e1938454-c009-441c-9022-7d5fd6d1e8d9 {
fill: none;
stroke: #000;
stroke-miterlimit: 10;
stroke-width: 0.25px;
}
</style>
</defs>
<g>
<path class="f8a8b876-3fc0-46ed-8a97-f915d88ee936" d="M166.084,93.2a12.266,12.266,0,0,1-1.7,4.671q-6.984,11.946-13.807,23.985a3.756,3.756,0,0,1-3.74,2.189q-55.292-.072-110.581,0a3.82,3.82,0,0,1-3.765-2.221Q25.43,109.412,18.24,97.069a8.029,8.029,0,0,1-1.092-4.24c.032-9.937.019-19.874.013-29.811a7.038,7.038,0,0,1,.737-3.735c4.984-8.59,9.924-17.2,14.9-25.8a12.367,12.367,0,0,1,1.309-1.594c9.516.028,19.032.083,28.548.079q42.978-.015,85.954-.068a5.241,5.241,0,0,1,2.031,2.431c4.719,8.209,9.43,16.422,14.234,24.581a15,15,0,0,1,1.208,3.889ZM93.133,53.9c-7.3,0-12.863,1.506-17.577,4.3-14.14,8.377-16.157,25.769-4.262,36.75,11.081,10.229,30.635,9.827,41.28-.849,9.2-9.224,9.206-22.764-.054-31.922A28.78,28.78,0,0,0,93.133,53.9Z" transform="translate(0.125 0.125)"/>
<path class="e696fb6a-331d-4674-9c1e-85312f6cdf42" d="M148.609,31.9q-42.977.037-85.954.068c-9.516,0-19.032-.051-28.548-.079,2.9-6.306,6.7-12.1,10.18-18.087.22-.378.787-.556,1.192-.826.69.057,1.381.161,2.071.162q44.1.012,88.2,0c.691,0,1.381-.1,2.072-.154A100.666,100.666,0,0,1,148.609,31.9Z" transform="translate(0.125 0.125)"/>
<path class="a1484ab1-7cc7-4f07-a801-284d374b45ef" d="M34.407,125.01h113.9c-1.527,4.255-4.526,7.375-5.954,11.214-2.153,5.788-6.092,6.871-11.95,6.8-27.523-.348-55.053-.181-82.58-.105-2.251.006-3.595-.554-4.7-2.631C40.445,135.24,37.478,130.346,34.407,125.01Z" transform="translate(0.125 0.125)"/>
<path class="f4b5ea5a-4c49-4847-8d9b-472ed1ed7495" d="M166.084,93.2l0-30.4c.364.136.909.165,1.065.426q4.163,6.995,8.218,14.053a2.038,2.038,0,0,1-.184,2c-2.54,4.354-5.1,8.695-7.636,13.053A1.952,1.952,0,0,1,166.084,93.2Z" transform="translate(0.125 0.125)"/>
<path class="a9ec29d3-ed66-4142-94fa-4baf4c9d2d75" d="M16.17,63.4V93.351c-3.143-5.414-6.206-10.012-8.6-15.017-.3-.622.03-1.124.336-1.654q3.872-6.689,7.711-13.4Z" transform="translate(0.125 0.125)"/>
<path class="a6fea285-09b9-4de9-a3d2-af5e9e743554" d="M93.133,53.9a28.78,28.78,0,0,1,19.387,8.278c9.26,9.158,9.251,22.7.054,31.922-10.645,10.676-30.2,11.078-41.28.849C59.4,83.968,61.416,66.576,75.556,58.2,80.27,55.406,85.837,53.9,93.133,53.9Z" transform="translate(0.125 0.125)"/>
<rect class="e1938454-c009-441c-9022-7d5fd6d1e8d9" x="0.125" y="0.125" width="185" height="158"/>
</g>
</svg>
</div>


</body>
</html>

Procedure:

Traced the PNG you added in your post in AI
Made the background part the right size
Created a new doc with it called test.svg
Placed a rectangle around it to keep it in place
Created a new html doc in an editor
Styled svg element with 100% width and height
Pasted both designs exported from AI as SVG code in html editor
Also created test.svg doc in same directory with the background only
Linked it to test it (worked good instead of use method)
Added comments in the group bellow the forefront of frame svg
Created codepen too with file linked and no use element

Upvotes: 0

Michael Mullany

Reputation: 31705

You need to switch the patternUnits to objectBoundingBox and add a patternContentUnits set to objectBoundingBox. You also need to add a preserveAspectRatio/slice to your test.svg if you want to preserve the original aspect ratio while fitting the viewport to the smaller image dimension. Here's a version with your test.svg converted into a symbol.

(Note that this doesn't look exactly like the sample image above - since the image you're using isn't drawn with black left/right borders. If you want black left/right borders you need to draw them in the test-svg.)

<div class="board">
  <svg viewBox="0 0 2500 1250" xmlns="http://www.w3.org/2000/svg">
    <defs>
      
<symbol id="test-symbol" viewBox="0 0 2911 2521" preserveAspectRatio="xMidYMid slice">
  <path d="m0 0h2911v2521h-2911z"/>
  <path d="m204.5 367h2502v1787h-2502z" fill="#fff"/>
  <circle cx="1455.5" cy="1260.5" fill="#c00" r="468"/>
</symbol>
      
      <pattern id="test" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" width="1" height="1">
        <use xlink:href="#test-symbol" x="0" y="0" width="1" height="1" />
      </pattern>
      <clipPath id="hex">
        <path d="m1008 376  211-365h422l211 365-211 365h-422z"/>
      </clipPath>
    </defs>
    <style>
      #h13 {fill: url(#test);}
    </style>
    <g id="parent" stroke="#50731b" stroke-width="20">
      <path id="h13" d="m1008 376  211-365h422l211 365-211 365h-422z"/>
      <path id="h22" d="m376 741   211-365h422l211 365-211 365h-422z"/>
      <path id="h24" d="m1641 741  211-365h422l211 365-211 365h-422z"/>
    </g>
  </svg>
</div>

Upvotes: 2

chrwahl

Reputation: 13060

You can always style element with a specific class name. Here I just add class name selected to the path element.

I will suggest that you have two layers. The background layer will have images and the foreground the hex (and the can both be hex shaped). Here I have inserted on image in the background of the path id="13". It is just a blue color and it has a clip-path that matches the hex shape. I will suggest that you create a hex shape that is placed in x=0, y=0 and use that as a generic clip-path for all (background) images.

I made an eventlistener for the parent element (g element with id="parent"). And then test if the right element was clicked. Right now the opacity is overriding the red fill, but you do whatever.

let parent = document.getElementById('parent');

parent.addEventListener('click', e => {
  if(e.target.nodeName == 'path'){
    // this is a hex
    e.target.classList.add('selected');
  }
});

<div class="board">
  <svg viewBox="0 0 3400 3673" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <clipPath id="hex">
        <path d="m1278 376  211-365h422l211 365-211 365h-422z"/>
      </clipPath>
    </defs>
    <style>
      g#parent path {fill: #bbb}
      path.selected {fill: red}
      path.selected {opacity: 0}
    </style>
    <g id="images">
      <image id="img13" x="1200" y="0" height="1000" width="1000" clip-path="url(#hex)" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj4KPHJlY3QgZmlsbD0iYmx1ZSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHg9IjAiIHk9IjAiLz4KPC9zdmc+"/> 
    </g>
    <g id="parent" stroke="#fff" stroke-width="20">
      <path id="13" d="m1278 376  211-365h422l211 365-211 365h-422z"/>
      <path id="22" d="m646 741   211-365h422l211 365-211 365h-422z"/>
      <path id="24" d="m1911 741  211-365h422l211 365-211 365h-422z"/>
      <path id="31" d="m14 1106   211-365h422l211 365-211 365h-422z"/>
      <path id="33" d="m1278 1106 211-365h422l211 365-211 365h-422z"/>
      <path id="35" d="m2543 1106 211-365h422l211 365-211 365h-422z"/>
      <path id="42" d="m646 1471  211-365h422l211 365-211 365h-422z"/>
      <path id="44" d="m1911 1471 211-365h422l211 365-211 365h-422z"/>
      <path id="51" d="m14 1836   211-365h422l211 365-211 365h-422z"/>
      <path id="53" d="m1278 1836 211-365h422l211 365-211 365h-422z"/>
      <path id="55" d="m2543 1836 211-365h422l211 365-211 365h-422z"/>
      <path id="62" d="m646 2201  211-365h422l211 365-211 365h-422z"/>
      <path id="64" d="m1911 2201 211-365h422l211 365-211 365h-422z"/>
      <path id="71" d="m14 2566   211-365h422l211 365-211 365h-422z"/>
      <path id="73" d="m1278 2566 211-365h422l211 365-211 365h-422z"/>
      <path id="75" d="m2543 2566 211-365h422l211 365-211 365h-422z"/>
      <path id="82" d="m646 2932  211-365h422l211 365-211 365h-422z"/>
      <path id="84" d="m1911 2932 211-365h422l211 365-211 365h-422z"/>
      <path id="93" d="m1278 3297 211-365h422l211 365-211 365h-422z"/>
    </g>
  </svg>
</div>

Upvotes: 3

How to make an image scale to fill the space of an SVG path?

Answers (3)

Related Questions