设计这个矢量图的时候有个问题,好像是矢量图的空格或者定位错误。
错误不在样式
css
中,问题仅出现在下图中。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<path d="M303.599,261.663v37.75c0,1.81-1.475,3.291-3.285,3.291h-18.626c-1.801,0-3.275-1.48-3.275-3.291 v-37.75c0-1.812,1.475-3.291,3.275-3.291h3.51v-8.199c-0.041-20.686-16.774-37.425-37.466-37.45h-18.483 c-20.691,0.025-37.415,16.765-37.455,37.45v8.199h3.855c1.811,0,3.286,1.479,3.286,3.291v37.75c0,1.81-1.475,3.291-3.286,3.291 h-4.059c3.306,10.289,12.939,17.74,24.332,17.761h5.92v-1.403c0-1.45,1.18-2.747,2.624-2.879l12.512-1.155 c1.455-0.132,3.998,1.328,3.998,7.243s-2.544,7.029-3.998,6.897l-12.512-1.165c-1.444-0.122-2.624-1.424-2.624-2.874v-1.389 h-5.92c-13.224,0-24.373-8.905-27.781-21.036h-11.108c-1.8,0-3.286-1.48-3.286-3.291v-37.75c0-1.812,1.485-3.291,3.286-3.291 h9.827v-8.199c0-23.402,18.981-42.379,42.389-42.379h18.483c23.417,0,42.389,18.977,42.389,42.379v8.199h10.193 C302.124,258.372,303.599,259.852,303.599,261.663z" style="fill:#777777;"/>
<path d="M264.181,265.691h-4.15c-1.302,0-2.35,1.048-2.35,2.34v9.638c0,1.298,1.048,2.345,2.35,2.345h4.15 c1.302,0,2.35-1.047,2.35-2.345v-9.638C266.53,266.739,265.482,265.691,264.181,265.691z" style="fill:#484B4D;"/>
<path d="M211.792,265.691c-1.292,0-2.34,1.048-2.34,2.34v9.638c0,1.298,1.048,2.345,2.34,2.345h4.171 c1.292,0,2.339-1.047,2.339-2.345v-9.638c0-1.292-1.047-2.34-2.339-2.34H211.792z" style="fill:#484B4D;"/>
</svg>
在此矢量图像中,它不会引起问题。
<svg id="8827bb75-1d28-4473-954e-960dfc3694a7" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.48231 33.6619"><title>erp</title><rect x="0.5" y="23.65583" width="27.42157" height="9.50608" rx="0.80219" ry="0.80219" style="fill:none;stroke:#45beeb;stroke-linecap:round;stroke-linejoin:round"/><path d="M3763.981,2725.52925h-25.44813a1.56423,1.56423,0,0,1-1.56423-1.56423v-6.37761a1.56423,1.56423,0,0,1,1.56423-1.56423h5.01593" transform="translate(-3736.46867 -2709.18579)" style="fill:none;stroke:#45beeb;stroke-linecap:round;stroke-linejoin:round"/><polyline points="13.236 5.375 18.05 10.311 27.982 0.5" style="fill:none;stroke:#45beeb;stroke-linecap:round;stroke-linejoin:round"/></svg>
矢量图像导致的问题是支持图像:
注意:矢量图像所在的边界与所有矢量图像中支持图像引起的误差相同,唯一的问题是支持矢量图像。
应阿尔瓦罗·蒙托罗的要求更新
CSS样式如下:
.Fleft {
float:left;
}
/*EL BORDE DEL CUADRO DONDE SE ENCUENTRA LA IMAGEN*/
.icon-big {
width: 64px;
height: 64px;
margin-top: 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
text-align: center;
box-shadow: inset 0 0 0 1px #d7d7d7;
-webkit-box-shadow: inset 0 0 0 1px #d7d7d7;
}
/*LA MANERA DE CÓMO OBTENGO LAS IMÁGENES VECTORIALES*/
.icon-support {
width: 40px;
height: 40px;
background-image: url(../img/system/gray/support.svg);
content: "";
display: inline-block;
background-size: cover;
position: relative;
top: 8px;
}
在HTML中
<div class="icon-big Fleft"><i class="icon-support"></i></div>
修改 SVG,希望它能在您的 HTML 之上工作
我所做的程序是在 Inkscape 中打开它并缩放它以使用 100% 的
viewbox
.path
使用该属性
stroke-width
,您可以使边缘更精细我已经复制了图像,并将其保存在我在线的服务器中的SVG中。所以我把你的代码:
图片看起来很小,但正如您在图片中显示的那样。如果您更改 CSS 以使背景图像更大且居中(分别使用
background-size
和background-position
),问题就解决了: