如何使图像缩放以填充 SVG 路径的空间？答案

【问题标题】：How to make an image scale to fill the space of an SVG path?如何使图像缩放以填充 SVG 路径的空间？
【发布时间】：2021-06-01 10:45:22
【问题描述】：

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

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>

上面的代码结果如下：

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

【问题讨论】：

pattern解决方案对图片不好，试试clipPath

标签： html css svg

【解决方案1】：

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

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

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

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>

【讨论】：

非常感谢您的回答；然而，我的问题的症结在于我无法获得填充属性以成功显示缩放到六边形路径的图像。我会进一步调查，非常感谢您的贡献
匆忙中，我没有意识到蓝色背景是用base64编码的图像......它必须这样编码吗？如果我只想链接到目录中的图像怎么办？我自己还不能测试它，但我将有机会在几个小时内测试它。我赞成你的答案，在我检查后，如果它有效，我会标记问题已解决。再次感谢
好的，刚刚试了一下。当我将我的一张图像编码为 base64 时，它没有居中并缩放到十六进制路径的尺寸。
@MichaelSwarts 图片不一定是数据 url。它仅用于示例。您可以链接到图像。我也尝试过使用 fill 属性，但也无法正常工作，

【解决方案2】：

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

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

【讨论】：

这看起来很接近，但并不完全……我创建了一个示例 SVG，它看起来垂直挤压。这里供参考：
我用问题的截图更新了我的问题。
如果您不想拉伸或剪切，则填充图像的纵横比必须与六边形的纵横比相匹配 - 即 1: 1.15。有关其他填充选项，请参阅此问题：stackoverflow.com/questions/48068936/…
我评论的 SVG 示例的纵横比为 1:1.15。一定是其他问题……
也许发布一个带有示例图像的完整测试用例，这样我们就不必猜测发生了什么

【解决方案3】：

将背景放置在与最前面的尺寸相同的矩形内并匹配 viewBox 的工作原理：

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

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

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

然后可以删除它并删除使用元素。

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

href 指向 test.svg 的图像元素在组内被注释，在 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 元素
将两个从 AI 导出的设计作为 SVG 代码粘贴到 html 编辑器中
还在与背景相同的目录中创建了 test.svg 文档
链接它来测试它（效果很好，而不是 use 方法）
在frame svg
最前面的组中添加了cmets
也创建了带有文件链接且没有 use 元素的 codepen

【讨论】：