主页 / 问题 / 1272871
Accepted
Armen
Asked:2022-04-21 17:53:13 +0000 UTC2022-04-21 17:53:13 +0000 UTC

如何使用css使SVG的高度和宽度等于里面绘制的（使用=>路径）

  • 772

由于某种原因，我有 svg 标签的高度和宽度 150h * 300w 但图标19*19
如何通过 css 做这样的事情：

svg{
  width: inner-content-width;
  height: inner-content-height;
}

当然，我可以像这样设置 svg，但这是不可取的，我有不同大小的 svg

svg{
  width: 19px;
  height: 19px;
}

svg 示例

<svg id="search" width="19" height="19" viewBox="0 0 19 19" fill="none" 

xmlns="http://www.w3.org/2000/svg">
<path d="M19 17L13.846 11.846C14.7988 10.3979 15.1805 8.64774 14.917 6.93442C14.6536 5.22111 13.7638 3.66648 12.4199 2.57154C11.076 1.47659 9.37369 0.919227 7.64247 1.00735C5.91125 1.09547 4.27431 1.82281 3.04857 3.04855C1.82283 4.27429 1.09549 5.91123 1.00737 7.64245C0.91925 9.37366 1.47662 11.076 2.57156 12.4199C3.6665 13.7637 5.22113 14.6535 6.93445 14.917C8.64777 15.1804 10.3979 14.7988 11.846 13.846L17 19L19 17ZM3 7.99998C3 5.24298 5.243 2.99998 8 2.99998C10.757 2.99998 13 5.24298 13 7.99998C13 10.757 10.757 13 8 13C5.243 13 3 10.757 3 7.99998Z" fill="white"/>
</svg>
html

2 个回答

  1. 由于某种原因，我有 svg 标签的高度和宽度 150h * 300w 但图标是 19 * 19

    如果未设置viewBox并且浏览器不知道 SVG 的尺寸并显示 SVG 的默认值，则会发生这种情况：

    宽 300 像素，高 150 像素。

    检查你的布局，这里用 icon 表示viewBox，显然它没有在你的应用程序中表示。

    下面是一个示例，您的图标将viewBox= 0 0 19 19其包裹在一个 div 中，width="19px" height="19px" 在这种情况下，该图标将具有与父块相同的大小。

    您可以重复使用它，同时重新着色、缩放、定位图标。

    注意CSS规则

    path {
fill:inherit;
}

    这样做是为了能够在使用标签后设置样式。<use>

    <style>
.wrapper {
width:19px;
height:19px;
}
path {
fill:inherit;
}
</style>
<div>
<div class="wrapper">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 19 19">  
    <symbol id="search">
    <path fill="black" d="M19 17L13.846 11.846C14.7988 10.3979 15.1805 8.64774 14.917 6.93442C14.6536 5.22111 13.7638 3.66648 12.4199 2.57154C11.076 1.47659 9.37369 0.919227 7.64247 1.00735C5.91125 1.09547 4.27431 1.82281 3.04857 3.04855C1.82283 4.27429 1.09549 5.91123 1.00737 7.64245C0.91925 9.37366 1.47662 11.076 2.57156 12.4199C3.6665 13.7637 5.22113 14.6535 6.93445 14.917C8.64777 15.1804 10.3979 14.7988 11.846 13.846L17 19L19 17ZM3 7.99998C3 5.24298 5.243 2.99998 8 2.99998C10.757 2.99998 13 5.24298 13 7.99998C13 10.757 10.757 13 8 13C5.243 13 3 10.757 3 7.99998Z" />    
    </symbol>   
      
</svg>
</div> 
  <!-- 1-ая иконка -->
<div class="wrapper"> 
   <svg> 
     <use href="#search" />
   </svg>
</div> 
  <!-- 2-ая иконка -->
<div class="wrapper"> 
   <svg> 
     <use href="#search" fill="red" x="20"/>
   </svg>
</div>
  <!-- 3-ая иконка -->
<div class="wrapper"> 
   <svg> 
     <use href="#search" fill="green" x="40" transform="scale(1.5)" />
   </svg>
</div>
</div>

    更新

    正如@Armen评论

    它似乎有效，但会产生其他问题包装器没有考虑到 svg 的大小......因此 svg 与另一个块重叠

    添加viewBox到<svg>.. </svg>，重新调用图标

    <div class="wrapper"> 
   <svg viewBox="0 0 19 19"> 
     <use href="#search" />
   </svg>
</div> 


    <style>
.container {
 }
.wrapper {
width:19px;
height:19px;
}
path {
fill:inherit;
}
</style>
    <div>
<div class="wrapper">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 19 19">  
    <symbol id="search">
    <path fill="black" d="M19 17L13.846 11.846C14.7988 10.3979 15.1805 8.64774 14.917 6.93442C14.6536 5.22111 13.7638 3.66648 12.4199 2.57154C11.076 1.47659 9.37369 0.919227 7.64247 1.00735C5.91125 1.09547 4.27431 1.82281 3.04857 3.04855C1.82283 4.27429 1.09549 5.91123 1.00737 7.64245C0.91925 9.37366 1.47662 11.076 2.57156 12.4199C3.6665 13.7637 5.22113 14.6535 6.93445 14.917C8.64777 15.1804 10.3979 14.7988 11.846 13.846L17 19L19 17ZM3 7.99998C3 5.24298 5.243 2.99998 8 2.99998C10.757 2.99998 13 5.24298 13 7.99998C13 10.757 10.757 13 8 13C5.243 13 3 10.757 3 7.99998Z" />    
    </symbol>   
      
</svg>
</div> 
  <!-- 1-ая иконка -->
<div class="wrapper"> 
   <svg viewBox="0 0 19 19"> 
     <use href="#search" />
   </svg>
</div> 
  <!-- 2-ая иконка -->
<div class="wrapper"> 
   <svg viewBox="0 0 19 19"> 
     <use href="#search" fill="red" />
   </svg>
</div>
  <!-- 3-ая иконка -->
<div class="wrapper"> 
   <svg viewBox="0 0 19 19"> 
     <use href="#search" fill="green"/>
   </svg>
</div>
</div>

    • 4
  2. Best Answer

    正如我设法通过css发现的，没有办法将大小设置为等于孩子这里是我的解决方案

    import React from 'react'
import useResizeObserver from "use-resize-observer";

interface SvgCreatorProps{
    clsName:string,
    svgHref:string
}

export const SvgCreator:React.FC<SvgCreatorProps> = ({clsName,svgHref}) => {
    const { ref, width = 1, height = 1 } = useResizeObserver<any>();
    return (
        <svg width={width} height={height} className={clsName}>
                <use ref={ref} href={svgHref} />
        </svg>
    )
}
    • 1

相关问题