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

Question

我希望此图像（test.svg）出现在另一个 SVG 的内部，以便它可以缩放以填充该区域。

测试.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>

上面的代码结果如下：

但是，我需要它看起来像这样：

Answer 1

您始终可以使用特定的 class 名称设置元素的样式。 这里我只是将selected的 class 名称添加到路径元素中。

我建议你有两层。 背景层将有图像，前景是十六进制（并且两者都可以是六角形）。 在这里，我在路径 id="13" 的背景中插入了图像。 它只是一种蓝色，并且具有与十六进制形状相匹配的剪辑路径。 我建议您创建一个放置在 x=0, y=0 中的十六进制形状，并将其用作所有（背景）图像的通用剪辑路径。

我为父元素（带有id="parent"的g元素）创建了一个事件监听器。 然后测试是否单击了正确的元素。 现在不透明度覆盖了红色填充，但你可以做任何事情。

 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

您需要将 patternUnits 切换到 objectBoundingBox 并将 patternContentUnits 设置为 objectBoundingBox。 您还需要在 test.svg 中添加一个 preserveAspectRatio/slice，如果您想在将视口适合较小图像尺寸的同时保留原始纵横比。 这是您的测试版本。svg 转换为符号。

（请注意，这看起来与上面的示例图像不完全相同- 因为您使用的图像不是用黑色左/右边框绘制的。如果您想要黑色左/右边框，您需要在测试中绘制它们 - 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

将背景放置在与最前面和匹配 viewBox 尺寸相同的矩形内：

以外部文件为背景的 CODE PEN PROJECT <<<

注意：下图只是使用方法。

将其复制到一个空文档中并保存为 test.svg。

然后可以将其擦除并删除使用元素。

然后只需从放置它的任何位置链接 test.svg。

带有指向 test.svg 的 href 的图像元素在 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>

程序：

• 在 AI 中跟踪您在帖子中添加的 PNG

• 使背景部分大小合适

• 用它创建了一个名为 test.svg 的新文档

• 在它周围放置一个矩形以使其保持原位

• 在编辑器中创建了一个新的 html 文档

• 具有 100% 宽度和高度的样式 svg 元素

• 在 html 编辑器中将从 AI 导出的两个设计粘贴为 SVG 代码

• 还在与背景相同的目录中创建了 test.svg doc

• 将其链接以对其进行测试（效果很好，而不是使用方法）

• 在框架 svg最前面的组中添加了评论

• 也创建了带有文件链接且没有使用元素的 codepen