Fatal编程技术网
  • html/
  • Html 如何设置svg图标的高度和宽度

Html 如何设置svg图标的高度和宽度

html css

Html 如何设置svg图标的高度和宽度,html,css,Html,Css,如何在html中设置svg图像的高度和宽度，以及我必须使用绝对位置，因为我必须设置类似于此图像的搜索图标 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .form-box{ display: block; padding: 8px

如何在html中设置svg图像的高度和宽度，以及我必须使用绝对位置，因为我必须设置类似于此图像的搜索图标

<!DOCTYPE html>
    <html>
    <head>
        <title></title>


        <style type="text/css">


    .form-box{
            display: block;
        padding: 8px;
        margin-top: 10px;
        border-radius: 5px;
        / box-shadow: none; /
        border: none;
        border: 1px solid #a4a4ac;
    }


        </style>
    </head>
    <body>

    <div>
     search your result

     <svg height="1024" width="973.125" xmlns="http://www.w3.org/2000/svg"><path d="M960 832L710.875 582.875C746.438 524.812 768 457.156 768 384 768 171.96900000000005 596 0 384 0 171.969 0 0 171.96900000000005 0 384c0 212 171.969 384 384 384 73.156 0 140.812-21.562 198.875-57L832 960c17.5 17.5 46.5 17.375 64 0l64-64C977.5 878.5 977.5 849.5 960 832zM384 640c-141.375 0-256-114.625-256-256s114.625-256 256-256 256 114.625 256 256S525.375 640 384 640z"/></svg>
     <input type="text" name="" class="form-box">
    </div>


    </body>
    </html>



.表格箱{
显示：块；
填充：8px；
边缘顶部：10px；
边界半径：5px；
/盒影：无/
边界：无；
边框：1px实心#a4a4ac；
}
搜索你的结果
删除svg文件的内联“高度”和“宽度”属性。您可以通过在文本编辑器中打开svg文件来进行这些更改

之后，您可以使用css设置高度和宽度，如下所示

svg {
  height: 50px;
  width: 50px;
}
删除svg文件的内联“高度”和“宽度”属性。您可以通过在文本编辑器中打开svg文件来进行这些更改

之后，您可以使用css设置高度和宽度，如下所示

svg {
  height: 50px;
  width: 50px;
}
您需要添加viewBox=“0 0 1024 974”并为调整SVG大小应用类

输入{
显示：块；
填充：8px 28px 8px 8px；
边界半径：5px；
边界：无；
边框：1px实心#a4a4ac；
}
.盒子{
位置：相对位置；
显示：内联块；
}
.box svg{
高度：18px；
宽度：18px；
位置：绝对位置；
右：5px；
排名：0；
底部：0；
保证金：自动；
}
搜索您的结果
您需要添加viewBox=“0 0 1024 974”并应用类来调整SVG的大小

输入{
显示：块；
填充：8px 28px 8px 8px；
边界半径：5px；
边界：无；
边框：1px实心#a4a4ac；
}
.盒子{
位置：相对位置；
显示：内联块；
}
.box svg{
高度：18px；
宽度：18px；
位置：绝对位置；
右：5px；
排名：0；
底部：0；
保证金：自动；
}
搜索您的结果
为svg图像和css中的
高度
，
宽度
提供
视图框
，以设置svg

.formbox{
显示：块；
填充：8px 28px 8px 8px；
边界半径：5px；
边界：无；
边框：1px实心#a4a4ac；
}
.searchwrap{
显示：块；
}
.searchinput{
位置：相对位置；
显示：内联块；
}
.searchwrap svg{
高度：20px；
宽度：20px；
位置：绝对位置；
右：5px；
排名：0；
底部：0；
保证金：自动；
}

搜索你的结果
为svg图像和css中的
高度
，
宽度
提供
视图框
，以设置svg

.formbox{
显示：块；
填充：8px 28px 8px 8px；
边界半径：5px；
边界：无；
边框：1px实心#a4a4ac；
}
.searchwrap{
显示：块；
}
.searchinput{
位置：相对位置；
显示：内联块；
}
.searchwrap svg{
高度：20px；
宽度：20px；
位置：绝对位置；
右：5px；
排名：0；
底部：0；
保证金：自动；
}

搜索你的结果