如何制作图像比例以填充 SVG 路径的空间？

Question

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:

Answer 1

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>

Answer 2

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>

Answer 3

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