Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/27.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 为什么SVG在重新加载时会显示大小调整(以不希望的方式),但在强制重新加载时会正确渲染?_Css_Reactjs_Svg - Fatal编程技术网

Css 为什么SVG在重新加载时会显示大小调整(以不希望的方式),但在强制重新加载时会正确渲染?

Css 为什么SVG在重新加载时会显示大小调整(以不希望的方式),但在强制重新加载时会正确渲染?,css,reactjs,svg,Css,Reactjs,Svg,我遇到了一个错误,SVG以一种意外(而且不受欢迎)的方式调整了大小。图标的样式如下所示: 只有使用cmd+shift+R重新加载页面时,它们才会正确显示。如果仅使用cmd+R重新加载页面,它们最终会变小: 它们应该是15x15px,但检查员显示它们的宽度要小得多。 如果您对正在发生的事情有任何建议/想法,我将不胜感激!(如果我还需要提供其他信息,请告诉我——这是我在这里的第一个问题。) 编辑以显示代码: svg文件: <svg width="13" height="13" viewB

我遇到了一个错误,SVG以一种意外(而且不受欢迎)的方式调整了大小。图标的样式如下所示:

只有使用cmd+shift+R重新加载页面时,它们才会正确显示。如果仅使用cmd+R重新加载页面,它们最终会变小:

它们应该是15x15px,但检查员显示它们的宽度要小得多。

如果您对正在发生的事情有任何建议/想法,我将不胜感激!(如果我还需要提供其他信息,请告诉我——这是我在这里的第一个问题。)

编辑以显示代码:

svg文件:

<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;
  }
`