Question

如何在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>

Answer 1

将viewBox提供给svg图片，并在css中设置height，width，因为您要设置svg。

.form-box{
  display: block;
  padding: 8px 28px 8px 8px;       
  border-radius: 5px;      
  border: none;
  border: 1px solid #a4a4ac;
}
.searchwrap p{
  display:block;
}
.searchinput {
  position: relative;
  display: inline-block;
}
.searchwrap svg {
  height: 20px;
  width: 20px;
  position: absolute;
  right: 5px;
  top: 0;
  bottom: 0;
  margin: auto;
}

<div class="searchwrap">
  <p>search your result</p>
    <div class="searchinput">
     <svg height="1024" width="973.125" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 974"><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>
</div>

Answer 2

删除内联＆＃34;身高＆＃34;和＆＃34;宽度＆＃34; svg文件的属性。您可以通过在文本编辑器中打开svg文件来进行这些更改。

之后，您可以使用css这样设置高度和宽度

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

Answer 3

您需要添加viewBox =“0 0 1024 974”并应用类调整大小SVG

input{
  display: block;
  padding: 8px 28px 8px 8px;       
  border-radius: 5px;      
  border: none;
  border: 1px solid #a4a4ac;
}
.box {
  position: relative;
  display: inline-block;
}
.box svg {
  height: 18px;
  width: 18px;
  position: absolute;
  right: 5px;
  top: 0;
  bottom: 0;
  margin: auto;
}

search your result

<div class="box">
     <svg height="1024" width="973.125" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 974"><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>

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

3 个答案: