Css 为什么SVG在重新加载时会显示大小调整(以不希望的方式),但在强制重新加载时会正确渲染?
我遇到了一个错误,SVG以一种意外(而且不受欢迎)的方式调整了大小。图标的样式如下所示: 只有使用cmd+shift+R重新加载页面时,它们才会正确显示。如果仅使用cmd+R重新加载页面,它们最终会变小: 它们应该是15x15px,但检查员显示它们的宽度要小得多。 如果您对正在发生的事情有任何建议/想法,我将不胜感激!(如果我还需要提供其他信息,请告诉我——这是我在这里的第一个问题。) 编辑以显示代码: svg文件:Css 为什么SVG在重新加载时会显示大小调整(以不希望的方式),但在强制重新加载时会正确渲染?,css,reactjs,svg,Css,Reactjs,Svg,我遇到了一个错误,SVG以一种意外(而且不受欢迎)的方式调整了大小。图标的样式如下所示: 只有使用cmd+shift+R重新加载页面时,它们才会正确显示。如果仅使用cmd+R重新加载页面,它们最终会变小: 它们应该是15x15px,但检查员显示它们的宽度要小得多。 如果您对正在发生的事情有任何建议/想法,我将不胜感激!(如果我还需要提供其他信息,请告诉我——这是我在这里的第一个问题。) 编辑以显示代码: svg文件: <svg width="13" height="13" viewB
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="6" width="13" height="7">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H12.9001V6.68354H0V0Z" transform="translate(0 6.31641)" fill="white"/>
</mask>
<g mask="url(#mask0)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.434174 0H12.3966C12.3966 0 13.2083 0.0625625 12.7712 0.967687L11.2404 5.96537C11.2404 5.96537 11.147 6.43337 10.3979 6.65275L2.46461 6.68362C2.46461 6.68362 1.90236 6.65275 1.49611 5.87194L0.0279237 0.8125C0.0279237 0.8125 -0.158951 0.156 0.434174 0Z" transform="translate(-0.000244141 6.31641)" fill="#818F6E"/>
</g>
<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="1" y="0" width="11" height="7">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H9.96288V6.09212H0V0Z" transform="translate(1.43335 0.566406)" fill="white"/>
</mask>
<g mask="url(#mask1)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.09229C0 6.08986 0.0836876 -0.120893 5.06025 0.00179403C9.672 0.116357 9.96288 6.05898 9.96288 6.06061L8.46381 5.93629C8.46381 5.93386 8.45487 1.37492 5.02856 1.28229C1.6445 1.19129 1.59331 5.93386 1.5925 5.93629L0 6.09229Z" transform="translate(1.43335 0.566406)" fill="#818F6E"/>
</g>
</svg>
您应该提供编解码器,以防svg的viewBox本身出现问题?或者可能是浏览器错误。在所有浏览器上都会发生这种情况吗?更新了问题以提供相关的代码片段。这在Chrome和Safari上都会发生/
<FollowersWrapper
follows={follows ? 1 : 0}
onClick={() => toggleFollow()}
>
<StatIcon src={follows ? following : notFollowing} alt="Followers" />
{followersCount}
</FollowersWrapper>
export const StatIcon = styled.img`
height: 15px;
width: 15px;
margin-right: 8px;
padding-top: 3px;
`
export const FollowersWrapper = styled(Flex)`
color: ${props =>
props.follows
? themeGet('colors.highlight')
: themeGet('colors.secondaryDarkVariant')};
font-size: 20px;
line-height: 23px;
letter-spacing: 1.33px;
font-family: ${themeGet('fonts.tabs.family')};
&:hover {
cursor: pointer;
}
`