如何解决更改SVG宽度时,保持字母间距不变
这是其中包含文本的SVG:
@font-face {
font-family: "Heebo-Light";
src: url(Heebo-Light.ttf) format("truetype");
}
svg {
position: relative;
display: block;
overflow: visible;
pointer-events: none;
}
body {
background-color: #FDFDFD;
}
<div style="margin: 0; z-index: 4; width: 257.829px; height: 42.6555px; opacity: 1; transform-origin: 128.914px 21.3277px; transform: translate(139px,84px) rotate(0deg) scale(1,1);" aria-label="do you ever">
<svg height="42.655499999999996" width="257.8288" viewBox="0 0 272 45" preserveAspectRatio="none">
<defs>
<linearGradient gradientTransform="rotate(90,0.5,0.5)" id="uniqueDomId-1114">
<stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
<stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
<stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
</linearGradient>
<filter id="uniqueDomId-1115" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
<feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
<feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
</feGaussianBlur>
<feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
</filter>
</defs>
<use transform="translate(-2.72,-0.45) scale(1.0199999809265137,1.0199999809265137) translate(0,0)" xlink:href="#uniqueDomId-1116" filter="url(#uniqueDomId-1115)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{"type":"translate","args":[-2.72,-0.45]},{"type":"scale","args":[1.0199999809265137,1.0199999809265137]}]"></use>
<g id="uniqueDomId-1116">
<g id="uniqueDomId-1117">
<path d="M0,0L272,0 272,45 0,45z" id="uniqueDomId-1118" fill="url(#uniqueDomId-1114)"></path>
</g>
<text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
<tspan>do you ever</tspan>
</text>
</g>
</svg>
<div>
问题是当我减小SVG宽度(仅宽度而不是高度)时,内部文本的字母间距也减小了,这不是我们想要的。我们希望文本保持完整。
如果将宽度设置为157像素,则结果如下:
@font-face {
font-family: "Heebo-Light";
src: url(Heebo-Light.ttf) format("truetype");
}
svg {
position: relative;
display: block;
overflow: visible;
pointer-events: none;
}
body {
background-color: #FDFDFD;
}
<div style="margin: 0; z-index: 4; width: 257.829px; height: 42.6555px; opacity: 1; transform-origin: 128.914px 21.3277px; transform: translate(139px,1);" aria-label="do you ever">
<svg height="42.655499999999996" width="157.8288" viewBox="0 0 272 45" preserveAspectRatio="none">
<defs>
<linearGradient gradientTransform="rotate(90,45z" id="uniqueDomId-1118" fill="url(#uniqueDomId-1114)"></path>
</g>
<text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
<tspan>do you ever</tspan>
</text>
</g>
</svg>
<div>
我试图将文本标签放置在SVG标签之外,或者使用CSS更改字母间距,但这并不是一个好主意。
注意:我只需要更改SVG的宽度...换句话说,我不想保留长宽比
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。