Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css SVG图标动画会留下像素间隙_Css_Svg_Css Animations_Frontend_Pixel - Fatal编程技术网

Css SVG图标动画会留下像素间隙

Css SVG图标动画会留下像素间隙,css,svg,css-animations,frontend,pixel,Css,Svg,Css Animations,Frontend,Pixel,我正在使用CSS制作SVG动画,我注意到在我的线条绘制动画中,任何SVG矩形(#剪贴板边框和#剪贴板剪辑边框)笔划都会排除左上角的一点,这使得它成为一个不完整的矩形 我尝试过在CSS中调整stroke dasharray和stroke dashoffset测量值,以及在SVG代码中调整大小和像素协调,但这两个都不是问题所在。帮忙 html, 身体{ 宽度:100%; 身高:100%; 背景色:#CECECE; } div{ 文本对齐:居中; } svg{ 显示:内联块; 宽度:120px; 利

我正在使用CSS制作SVG动画,我注意到在我的线条绘制动画中,任何SVG矩形(#剪贴板边框和#剪贴板剪辑边框)笔划都会排除左上角的一点,这使得它成为一个不完整的矩形

我尝试过在CSS中调整stroke dasharray和stroke dashoffset测量值,以及在SVG代码中调整大小和像素协调,但这两个都不是问题所在。帮忙

html,
身体{
宽度:100%;
身高:100%;
背景色:#CECECE;
}
div{
文本对齐:居中;
}
svg{
显示:内联块;
宽度:120px;
利润率:3%;
填充:0px 100px;
}
/* --------------------- 
SVG规则
--------------------- */
/*所有灰色笔划*/
#剪贴板边框,
.剪贴板内容,
.剪贴板边框,
.机械铅笔边框{
填充:无;
行程:#4D5152;
笔画宽度:6;
行程限制:10;
}
/*一切都是白色的*/
#剪贴板纸张填充,
#机械铅笔橡皮擦填充{
填充:#F3F7F6;
}
/*一切都是绿色的*/
#机械笔尖填充,
#机械铅笔顶部填充{
填充物:25B686;
}
/*一切都是蓝色的*/
#剪贴板填充{
填充:#85D0D3;
}
/*万物皆黄*/
#剪贴板剪辑填充,
#机械铅笔夹{
填充:#FBCE;
}
#剪贴板-旋钮-1,
#剪贴板-旋钮-2,
#剪贴板-旋钮-3,
#机械铅笔底部btn,
#机械铅笔头{
行程:8px;
行程偏移:8px;
动画:跟踪。5秒向前放松;
}
/* ---------------------
动画关键帧
--------------------- */
@关键帧跟踪{
100% {
行程偏移:0px;
}
}
@关键帧填充它{
100% {
不透明度:1;
}
}
@关键帧增长{
0% {
变换:比例(0);
}
30% {
转换:比例(1.1);
}
60% {
变换:比例(.9);
}
}
/* --------------------- 
SVG动画:洞察和规划图标
--------------------- */
#剪贴板剪辑边框{
行程阵列:180px;
行程偏移:180px;
动画:trace.2s向前放松;
}
#剪贴板剪辑填充{
不透明度:0;
动画:填充。2秒。2秒向前放松;
}
#剪贴板边框{
笔划阵列:640px;
行程偏移:640px;
动画:轨迹1.25秒缓进缓出向前;
}
#剪贴板填充,
#机械笔尖填充,
#机械铅笔顶部填充{
不透明度:0;
动画:填充。25秒1.25秒缓进缓出向前;
}
#剪贴板纸边框{
笔划阵列:400px;
行程偏移:400px;
动画:跟踪1向前放松;
}
#剪贴板纸张填充,
#机械铅笔橡皮擦填充,
#机械铅笔夹{
不透明度:0;
动画:填充。75秒1轻松进退向前;
}
#剪贴板-content-line-1{
行程:30px;
行程偏移:30px;
动画:跟踪。5秒向前放松;
}
#剪贴板-content-line-7,
#剪贴板剪辑详细信息{
行程:52px;
行程偏移:52px;
动画:跟踪。5秒向前放松;
}
#剪贴板内容行,
#甚至剪贴板内容行,
#机械铅笔橡皮擦边框{
行程:80px;
行程偏移:80px;
动画:trace.75s向前放松;
}
#机械铅笔边框左,
#机械铅笔边框右侧{
行程:115px;
行程偏移:115px;
动画:trace.75s向前放松;
}
#机械铅笔尖边框{
笔划阵列:60px;
行程偏移:60px;
动画:跟踪。5秒向前放松;
}
#机械铅笔头,
#机械铅笔头{
行程阵列:10px;
行程偏移:10px;
动画:跟踪。4s向前放松;
}
/* --------------------- 
动画延迟
--------------------- */
#剪贴板-旋钮-1,
#剪贴板-旋钮-2{
动画延迟:.25s;
}
#剪贴板剪辑细节,
#剪贴板内容行,
#剪贴板-content-line-7,
#剪贴板-旋钮-2{
动画延迟:.5s;
}
#机械铅笔底部btn,
#机械铅笔头{
动画延迟:1.25秒;
}

只需添加
笔划线头:正方形到SVG对象的CSS声明

svg {
  display: inline-block;
  width: 120px;
  margin: 3% auto;
  padding: 0px 100px;
  stroke-linecap: square;  /* <-- Add this */
}
svg{
显示:内联块;
宽度:120px;
利润率:3%;
填充:0px 100px;

stroke linecap:square;/*非常感谢您的帮助!啊,下次我肯定会这么做,不过我还是会习惯的。