我在我的网站上使用 svg 图标。 这是我从 Adobe Illustrator 获得的代码：
<svg id="Livello_1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448.05 436.7"><path d="M190.5,66.9l22.2-22.2a23.9,23.9,0,0,1,33.9,0L441,239a23.9,23.9,0,0,1,0,33.9L246.6,467.3a23.9,23.9,0,0,1-33.9,0l-22.2-22.2a24,24,0,0,1,.4-34.3L311.4,296H24A23.94,23.94,0,0,1,0,272V240a23.94,23.94,0,0,1,24-24H311.4L190.9,101.2A23.85,23.85,0,0,1,190.5,66.9Z" transform="translate(0 -37.65)"/></svg>我已经能够改变它的颜色（在我的CSS中
fill:#33453a;font-sizewidth:hover这可能是一个棘手的问题。正如其他人指出的那样，您打算做的事情是不可能的，但是
font-size如果你研究像react-icons这样的大项目，你可以一睹他们是如何做到的。
const computedSize = size || conf.size || "1em";
let className;
if (conf.className) className = conf.className;
if (props.className) className = (className ? className + ' ' : '') + props.className;
return (
<svg
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
{...conf.attr}
{...attr}
{...svgProps}
className={className}
style={{ color: props.color || conf.color, ...conf.style, ...props.style}}
height={computedSize}
width={computedSize}
xmlns="http://www.w3.org/2000/svg"
>
{title && <title>{title}</title>}
{props.children}
</svg>
)
};所以你可能会有类似的东西：
<span style="font-size: 14px">hi <svg ...></svg></span>诀窍是分配
widthheightemephemeral unitrem
emfont-size解决方案：添加
width:1emheight:1em<svg height="1em" width="1em" id="Livello_1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448.05 436.7"><path d="M190.5,66.9l22.2-22.2a23.9,23.9,0,0,1,33.9,0L441,239a23.9,23.9,0,0,1,0,33.9L246.6,467.3a23.9,23.9,0,0,1-33.9,0l-22.2-22.2a24,24,0,0,1,.4-34.3L311.4,296H24A23.94,23.94,0,0,1,0,272V240a23.94,23.94,0,0,1,24-24H311.4L190.9,101.2A23.85,23.85,0,0,1,190.5,66.9Z" transform="translate(0 -37.65)"/></svg>由于它不包含带有字体的文本，所以更好的方法是使用缩放来增加尺寸。 :
<style>
svg
{
transform: scale(1.3);
}
</style>
您无法更改字体大小或字体宽度，因为 SVG 不是字体。它是可缩放矢量图形。如果您的 SVG 中有一些文本，那么您可以使用文本元素中的字体执行某些操作。
widthheight#Livello_1:hover
{
fill:#33453a;
width:48px;
height:48px
}<svg id="Livello_1" width="36" height="36" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448.05 436.7"><path d="M190.5,66.9l22.2-22.2a23.9,23.9,0,0,1,33.9,0L441,239a23.9,23.9,0,0,1,0,33.9L246.6,467.3a23.9,23.9,0,0,1-33.9,0l-22.2-22.2a24,24,0,0,1,.4-34.3L311.4,296H24A23.94,23.94,0,0,1,0,272V240a23.94,23.94,0,0,1,24-24H311.4L190.9,101.2A23.85,23.85,0,0,1,190.5,66.9Z" transform="translate(0 -37.65)"/></svg>要查看效果，您必须将鼠标光标移到此 SVG 上（在代码片段中，必须运行）。
我想你需要相对于你的字体大小对齐和缩放你的 svg 图标。
这是 svg 和 css 之间的“团队合作”：
在 css 中，我们确保 svg 具有 inline-block 上下文，即相对于继承的字体大小的高度。
在 svg 中，我们为每个图标使用单独的 viewBox 属性。
如果您需要调整 :hover 上的基线对齐或尺寸，您需要避免布局移位，例如垂直对齐也会导致下一行 - 因此我们使用相对位置和底部偏移。
/* just an example code to illustrate the scalability */
const fontSize= document.querySelector('.fontSize');
const layout = document.querySelector('.layout');
fontSize.addEventListener('change', function(e) {
let currentSize = +e.target.value;
layout.setAttribute('style', 'font-size:'+(1+currentSize)+'em');
});/* svg will behave similarly to a character/glyph */
.svg-inline {
display: inline-block;
/* without a custom viewbox we have a square aspect ratio as default */
height: 1em;
width: 1em;
}
/**
* optional adjustment:
* font-size: if icons are too big
* vertical baseline offset
**/
.svg-adjust {
font-size: 0.75em;
position: relative;
bottom: -0.1em;
transition: 0.3s;
}
/* set size by viewbox if present */
.svg-inline[viewBox] {
width: auto;
}
.svg-inline-assets{
display:none
}
a:hover .svg-inline {
fill: green;
transform: scale(1.5);
margin-left: 0.5em;
margin-right: 0.5em;
}
/* example layout */
html {
font-family: "Segoe UI";
font-size: calc(1vw + 1vh /2);
line-height: 1.4em;
}
.layout {
width: 50%;
margin: 0 auto;
font-size: 1.5em;
line-height: 1.4em;
}
p {
margin: 0;
}
a {
text-decoration: none;
color: inherit;
border-bottom: 2px solid #aaa;
}
a .svg-inline {
fill: #aaa;
}
.button {
font-size: 1.333em;
line-height: 1em;
background-color: #aaa;
border: 2px solid #aaa;
color: #fff;
cursor: pointer;
margin-top: 1rem;
padding: 0.3em;
}
.button .svg-inline {
fill: #fff;
}
.input-range {
width: 100%;
}<main class="layout">
<h3>Change font Size</h3>
<p>
<input class="input-range fontSize" type="range" value="0" min="-0.5" max="0.5" step="0.1">
</p>
<svg class="svg-inline-assets" viewBox="0 0 100 100">
<!-- every asset has it's own viewbox: this way we can place icons with different widths -->
<symbol id="fa-arrow-right-asset" viewBox="0 0 100 100">
<path d="M42.5,7.8l5-5c2.1-2.1,5.5-2.1,7.5,0c0,0,0,0,0,0l43.4,43.4c2.1,2.1,2.1,5.5,0,7.5c0,0,0,0,0,0L55,97.2c-2.1,2.1-5.5,2.1-7.5,0c0,0,0,0,0,0l-5-5c-2.1-2.1-2.1-5.5,0-7.6c0,0,0.1-0.1,0.1-0.1l26.9-25.6H5.4c-3,0-5.3-2.4-5.4-5.3c0,0,0,0,0,0v-7.1c0-3,2.4-5.3,5.3-5.4c0,0,0,0,0,0h64.1L42.6,15.5c-2.1-2-2.2-5.4-0.2-7.5C42.4,7.9,42.5,7.8,42.5,7.8z" />
</symbol>
<symbol id="fa-arrow-right-long-asset" viewBox="0 0 200 100">
<path d="M141.1,7.8l5-5c2.1-2.1,5.5-2.1,7.5,0c0,0,0,0,0,0L197,46.2c2.1,2.1,2.1,5.5,0,7.5c0,0,0,0,0,0l-43.4,43.4c-2.1,2.1-5.5,2.1-7.5,0c0,0,0,0,0,0l-5-5c-2.1-2.1-2.1-5.5,0-7.6c0,0,0.1-0.1,0.1-0.1l26.9-25.6H5.4c-3,0-5.3-2.4-5.4-5.3c0,0,0,0,0,0v-7.1c0-3,2.4-5.3,5.3-5.4c0,0,0,0,0,0h162.7l-26.9-25.6c-2.1-2-2.2-5.4-0.2-7.5C141,7.9,141,7.8,141.1,7.8z" />
</symbol>
<!-- this arrow has a x offset of 200: without it's own viewbox it would be cropped -->
<symbol id="fa-arrow-right-long-offset-asset" viewBox="200 0 200 100">
<path d="M341.1,7.8l5,-5c2.1,-2.1,5.5,-2.1,7.5,0c0,0,0,0,0,0l43.4,43.4c2.1,2.1,2.1,5.5,0,7.5c0,0,0,0,0,0l-43.4,43.4c-2.1,2.1,-5.5,2.1,-7.5,0c0,0,0,0,0,0l-5,-5c-2.1,-2.1,-2.1,-5.5,0,-7.6c0,0,0.1,-0.1,0.1,-0.1l26.9,-25.6h-162.7c-3,0,-5.3,-2.4,-5.4,-5.3c0,0,0,0,0,0v-7.1c0,-3,2.4,-5.3,5.3,-5.4c0,0,0,0,0,0h162.7l-26.9,-25.6c-2.1,-2,-2.2,-5.4,-0.2,-7.5c0.1,0,0.1,-0.1,0.2,-0.1z" />
</symbol>
<symbol id="fa-arrow-right-narrow-asset" viewBox="0 0 60 100">
<path d="M57.5,46.2L14.1,2.8c0,0,0,0,0,0c-2.1-2.1-5.5-2.1-7.5,0l-5,5c0,0-0.1,0.1-0.1,0.1c-2,2.1-1.9,5.5,0.2,7.5l37,34.5l-37,34.5c0,0-0.1,0.1-0.1,0.1c-2.1,2.1-2.1,5.5,0,7.6l5,5c0,0,0,0,0,0c2.1,2.1,5.5,2.1,7.5,0l43.4-43.4c0,0,0,0,0,0C59.6,51.7,59.6,48.3,57.5,46.2z" />
</symbol>
</svg>
<h2>Svg inlined icon</h2>
<p><svg class="svg-inline">
<use href="#fa-arrow-right-asset" />
</svg>No vertical adjustment. One morning, when
<svg class="svg-inline svg-adjust">
<use href="#fa-arrow-right-asset" />
</svg>
Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a
<a href="#"><svg class="svg-inline svg-adjust" viewBox="0 0 200 100">
<use href="#fa-arrow-right-long-asset" />
</svg>
little he could see his brown belly</a>, slightly domed and divided by arches into stiff sections.
<svg class="svg-inline svg-adjust" viewBox="0 0 200 100">
<use href="#fa-arrow-right-long-offset-asset" />
</svg> Long arrow with offset.
</p>
<p>The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with
<svg class="svg-inline svg-adjust" viewBox="0 0 60 100">
<use href="#fa-arrow-right-narrow-asset" />
</svg> the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream.
</p>
<p>
<button class="button" type="button">
<svg class="svg-inline svg-adjust" viewBox="0 0 60 100">
<use href="#fa-arrow-right-narrow-asset" />
</svg> Button
</button>
<button class="button" type="button">
<svg class="svg-inline svg-adjust">
<use href="#fa-arrow-right-asset" />
</svg>
</button>
<button class="button" type="button">
<svg class="svg-inline svg-adjust" viewBox="0 0 200 100">
<use href="#fa-arrow-right-long-asset" />
</svg>
</button>
</p>
</main>添加到 svg transform="scale(1.7)" 用于缩放
<svg transform="scale(1.7)" width="16px" height="24px" version="1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg" >