我想使用 figma 自制的 SVG 我將它保存在我的筆記本電腦上作為 VisaCard.SVG 并且我能夠在編輯器中打開它，但它具有 HTML 格式。我的主要目標是使用它作為 SVG 作為背景在其上寫入文本。
我在網上查看了如何使用 SVG 作為背景，但到目前為止，我只找到了將 svg 用作鏈接的示例，所以我想知道如何使用 SVG 檔案來實作這一點。或者有人可以幫助我了解如何將我自己的 SVG 實作為 URL？我從https://codepen.io/rmcguinn/pen/JpVwBp遵循這個例子，但是 SVG 的 sintax 是不同的。
Example from <https://codepen.io/rmcguinn/pen/JpVwBp>
.Inner-wrap {
background-color: red;
background-image: url("data:image/svg xml,");
background-size: auto 147%;
background-position: center;
position: relative;
height: 100%;
width: 100%;
border-radius: 13px;
padding: 20px 40px;
box-sizing: border-box;
color: #fff;
}
礦井 SVG
<svg width="240" height="144" viewBox="0 0 240 144" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_105_102461)">
<rect width="240" height="144" rx="8" fill="url(#paint0_linear_105_102461)"/>
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M-28.6897 92.6764L61.0255 68.6372C69.0915 66.476 73.8782 58.1851 71.717 50.1191L47.6779 -39.596L14.6097 -58.688L-39.5345 35.0924C-41.5395 38.5653 -42.0828 42.6924 -41.045 46.5658L-28.6897 92.6764Z" fill="white"/>
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M207.941 180.677L297.656 156.638C305.722 154.477 310.508 146.186 308.347 138.12L284.308 48.405L251.24 29.313L197.096 123.093C195.091 126.566 194.547 130.693 195.585 134.567L207.941 180.677Z" fill="white"/>
</g>
<defs>
<linearGradient id="paint0_linear_105_102461" x1="0" y1="0" x2="257.595" y2="46.4717" gradientUnits="userSpaceOnUse">
<stop stop-color="#0F3CF0"/>
<stop offset="1" stop-color="#0C31C6"/>
</linearGradient>
<clipPath id="clip0_105_102461">
<rect width="240" height="144" rx="8" fill="white"/>
</clipPath>
</defs>
</svg>
uj5u.com熱心網友回復：
首先，您需要將svg影像轉換為 css 背景。您可以通過訪問此工具來做到這一點。有了 CSS 背景后，您通常可以將其應用于您想要的元素。應該這樣做！
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/441116.html
上一篇：在不同作業系統上呈現不同的SVG
下一篇：如何計算多邊形的精確旋轉？