css 如何匹配SVG及其子标记PATH的大小

p3rjfoxz 于 2023-05-19 发布在其他

关注(0)|答案(1)|浏览(182)

当你使用SVG文件并像这样设置宽度和高度时，有些文件会出现问题。

(next.js)

<SearchIcon width={25} height={25} />

并非所有的svg文件都是这样的，但有时一些文件与我为svg设置的宽度和高度以及svg标记下面的子path的大小不匹配。
svg大小是我设置的，但path大小不是我所期望的。这导致每个SVG文件的大小不同，这使得应用CSS样式变得非常棘手。
如何匹配svg和path的大小？下面是svg file代码。

<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none">
  <path fill="#000000" fill-rule="evenodd" d="M4 9a5 5 0 1110 0A5 5 0 014 9zm5-7a7 7 0 104.2 12.6.999.999 0 00.093.107l3 3a1 1 0 001.414-1.414l-3-3a.999.999 0 00-.107-.093A7 7 0 009 2z"/>
</svg>

我在CSS中尝试了下面的代码，但它不适用

svg {
    path {
      width: 25px;
      height: 25px;
    }
  }

css

来源：https://stackoverflow.com/questions/76287670/how-to-match-the-size-of-an-svg-and-its-child-tag-path

1条答案

按热度按时间

py49o6xq1#

JavaScript方法：

<svg width="20px" height="20px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none">
  <path fill="#000000" fill-rule="evenodd" d="M4 9a5 5 0 1110 0A5 5 0 014 9zm5-7a7 7 0 104.2 12.6.999.999 0 00.093.107l3 3a1 1 0 001.414-1.414l-3-3a.999.999 0 00-.107-.093A7 7 0 009 2z" />
</svg>
  
<script>
  var svg = document.getElementsByTagName("svg")[0];
  var BBox = svg.getBBox();
  var viewBox = [BBox.x, BBox.y, BBox.width, BBox.height].join(" ");
  svg.setAttribute("viewBox", viewBox);
</script>

赞(0）回复(0）举报 2023-05-19

我来回答

css 如何匹配SVG及其子标记PATH的大小

1条答案

相关问题

热门标签

最新问答