- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 CSS 制作 SVG 动画,我注意到在我的线条画动画中,任何 SVG 矩形(#clipboard-border 和 #clipboard-clip-border)笔划总是会排除左上角的一点 Angular ,这使它成为一个不完整的矩形。
我试过在 CSS 中调整 stroke-dasharray 和 stroke-dashoffset 测量值,以及在 SVG 代码中调整大小和像素协调,但看起来都不是问题。帮忙?
html,
body {
width: 100%;
height: 100%;
background-color: #CECECE;
}
div {
text-align: center;
}
svg {
display: inline-block;
width: 120px;
margin: 3% auto;
padding: 0px 100px;
}
/* ---------------------
SVG RULES
--------------------- */
/* All grey strokes */
#clipboard-border,
.clipboard-content,
.clipboard-borders,
.mech-pencil-borders {
fill: none;
stroke: #4D5152;
stroke-width: 6;
stroke-miterlimit: 10;
}
/* All things white */
#clipboard-paper-fill,
#mech-pencil-eraser-fill {
fill: #F3F7F6;
}
/* All things green */
#mech-pencil-point-fill,
#mech-pencil-top-fill {
fill: #25B686;
}
/* All things blue */
#clipboard-fill {
fill: #85D0D3;
}
/* All things yellow */
#clipboard-clip-fill,
#mech-pencil-grip {
fill: #FBFBCE;
}
#clipboard-knob-1,
#clipboard-knob-2,
#clipboard-knob-3,
#mech-pencil-bottom-btn,
#mech-pencil-top-btn {
stroke-dasharray: 8px;
stroke-dashoffset: 8px;
animation: trace .5s ease-out forwards;
}
/* ---------------------
ANIMATION KEYFRAMES
--------------------- */
@keyframes trace {
100% {
stroke-dashoffset: 0px;
}
}
@keyframes fill-it {
100% {
opacity: 1;
}
}
@keyframes grow {
0% {
transform: scale(0);
}
30% {
transform: scale(1.1);
}
60% {
transform: scale(.9);
}
}
/* ---------------------
SVG ANIMATION: INSIGHT & PLANNING ICON
--------------------- */
#clipboard-clip-border {
stroke-dasharray: 180px;
stroke-dashoffset: 180px;
animation: trace .2s ease-out forwards;
}
#clipboard-clip-fill {
opacity: 0;
animation: fill-it .2s .2s ease-in-out forwards;
}
#clipboard-border {
stroke-dasharray: 640px;
stroke-dashoffset: 640px;
animation: trace 1.25s ease-in-out forwards;
}
#clipboard-fill,
#mech-pencil-point-fill,
#mech-pencil-top-fill {
opacity: 0;
animation: fill-it .25s 1.25s ease-in-out forwards;
}
#clipboard-paper-border {
stroke-dasharray: 400px;
stroke-dashoffset: 400px;
animation: trace 1s ease-out forwards;
}
#clipboard-paper-fill,
#mech-pencil-eraser-fill,
#mech-pencil-grip {
opacity: 0;
animation: fill-it .75s 1s ease-in-out forwards;
}
#clipboard-content-line-1 {
stroke-dasharray: 30px;
stroke-dashoffset: 30px;
animation: trace .5s ease-out forwards;
}
#clipboard-content-line-7,
#clipboard-clip-detail {
stroke-dasharray: 52px;
stroke-dashoffset: 52px;
animation: trace .5s ease-out forwards;
}
#clipboard-content-line,
#clipboard-content-line-even,
#mech-pencil-eraser-border {
stroke-dasharray: 80px;
stroke-dashoffset: 80px;
animation: trace .75s ease-out forwards;
}
#mech-pencil-border-left,
#mech-pencil-border-right {
stroke-dasharray: 115px;
stroke-dashoffset: 115px;
animation: trace .75s ease-out forwards;
}
#mech-pencil-point-border {
stroke-dasharray: 60px;
stroke-dashoffset: 60px;
animation: trace .5s ease-out forwards;
}
#mech-pencil-tip,
#mech-pencil-top {
stroke-dasharray: 10px;
stroke-dashoffset: 10px;
animation: trace .4s ease-out forwards;
}
/* ---------------------
ANIMATION DELAYS
--------------------- */
#clipboard-knob-1,
#clipboard-knob-2 {
animation-delay: .25s;
}
#clipboard-clip-detail,
#clipboard-content-line,
#clipboard-content-line-7,
#clipboard-knob-2 {
animation-delay: .5s;
}
#mech-pencil-bottom-btn,
#mech-pencil-top-btn {
animation-delay: 1.25s;
}
<div class="wrapper">
<!-- INSIGHT & PLANNING ICON -->
<svg id="insight-planning" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200">
<g class="clipboard">
<rect id="clipboard-fill" x="15.015" y="11.44" width="132" height="182" />
<rect id="clipboard-paper-fill" x="30.753" y="11.44" width="100" height="151" />
<g class="clipboard-content">
<line id="clipboard-content-line-even" x1="46.491" y1="68.096" x2="115.738" y2="68.096" />
<line id="clipboard-content-line" x1="46.491" y1="80.687" x2="115.738" y2="80.687" />
<line id="clipboard-content-line-even" x1="46.491" y1="93.277" x2="115.738" y2="93.277" />
<line id="clipboard-content-line" x1="46.491" y1="105.867" x2="115.738" y2="105.867" />
<line id="clipboard-content-line-even" x1="46.491" y1="118.458" x2="115.738" y2="118.458" />
<line id="clipboard-content-line-7" x1="46.491" y1="131.048" x2="96.852" y2="131.048" />
<line id="clipboard-content-line-1" x1="115.738" y1="49.211" x2="90.557" y2="49.211" />
</g>
<rect id="clipboard-border" x="15.015" y="11.44" width="132" height="182" />
</g>
<g class="mech-pencil-fills">
<rect id="mech-pencil-grip" x="166.099" y="96.425" width="18" height="47" />
<rect id="mech-pencil-top-fill" x="166.099" y="30.325" width="18" height="66" />
<rect id="mech-pencil-eraser-fill" x="166.099" y="11.44" width="18" height="18" />
<polygon id="mech-pencil-point-fill" points="184.985,143.639 184.985,159.376 175.542,168.819 166.099,159.376 166.099,143.639" />
</g>
<g class="mech-pencil-borders">
<line id="mech-pencil-border-left" x1="166.099" y1="143.639" x2="166.099" y2="30.325" />
<line id="mech-pencil-border-right" x1="184.985" y1="30.325" x2="184.985" y2="145" />
<rect id="mech-pencil-eraser-border" x="166.099" y="11.44" width="18" height="18" />
<polygon id="mech-pencil-point-border" points="184.985,143.639 184.985,159.376 175.542,168.819 166.099,159.376 166.099,143.639" />
<line id="mech-pencil-top" x1="175.542" y1="11.44" x2="175.542" y2="1.997" />
<line id="mech-pencil-tip" x1="175.542" y1="168.819" x2="175.542" y2="175.114" />
<line id="mech-pencil-bottom-btn" x1="175.542" y1="127.901" x2="175.542" y2="121.605" />
<line id="mech-pencil-top-btn" x1="175.542" y1="115.31" x2="175.542" y2="109.015" />
</g>
<g class="clipboard-clip">
<rect id="clipboard-clip-fill" x="49.639" y="5.144" width="62" height="25" />
</g>
<g class="clipboard-borders">
<polyline id="clipboard-paper-border" points="131.476,11.44 131.476,162.524 30.753,162.524 30.753,11.44" />
<rect id="clipboard-clip-border" x="49.639" y="5.144" width="62" height="25" />
<line id="clipboard-clip-detail" x1="59.081" y1="17.735" x2="103.148" y2="17.735" />
<line id="clipboard-knob-1" x1="65.376" y1="178.262" x2="71.672" y2="178.262" />
<line id="clipboard-knob-2" x1="77.967" y1="178.262" x2="84.262" y2="178.262" />
<line id="clipboard-knob-3" x1="90.557" y1="178.262" x2="96.852" y2="178.262" />
</g>
</svg>
</div>
也张贴在Codepen .
最佳答案
只需将 stroke-linecap: square;
添加到 SVG 对象的 CSS 声明即可。
svg {
display: inline-block;
width: 120px;
margin: 3% auto;
padding: 0px 100px;
stroke-linecap: square; /* <-- Add this */
}
示例:
这是一个有两条路径的 SVG(开放的,而不是封闭的)。用“butt”线结尾绘制的路径在顶 Angular 有点缺失,但另一条路径(用“square”线结尾绘制)没有这个问题。
<svg width="250" height="100" viewBox="0 0 250 100">
<path d="M10 10h80v80h-80v-80" style="stroke:#000; stroke-width:10px; fill:none; stroke-linecap: square;"/>
<text x="50" y="70" text-anchor="middle">Square</text>
<path d="M160 10h80v80h-80v-80" style="stroke:#000; stroke-width:10px; fill:none; stroke-linecap: butt;"/>
<text x="200" y="70" text-anchor="middle">Butt</text>
</svg>
附言我喜欢你的作品,但下次请考虑制作 minimal, complete and verifiable example来说明问题。这样人们就不必费力地浏览大量代码来发现问题所在:-)
关于css - SVG 图标动画留下像素间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39498100/
目前,我在单击我的正文时打开一个新选项卡,但它将焦点更改为子窗口。但我想通过留下窗口来做到这一点,这样弹出窗口就不会被阻止,并且我可以将焦点放在当前窗口上。 以下代码当前正在运行 /** * For
我有一个带有线性渐变的 css 背景图像。 CSS 代码: .footer-about { display: flex; align-items: center; justif
在服务中包含以下代码(假设在快速端点上): async function (res, req, next) { const fetch = require('node-fetch'); awa
我正在使用 IImageList 和 SHGetFileInfo 为任何给定路径提取巨型图标。一旦我有了它,然后我使用 DrawIconEx 将 HICON 渲染到 HBITMAP 中,最终使用 GD
我有图表并计算了网络密度,现在我应该只保留具有最大权重的分支(网络密度的前 10%,例如 200 中权重最大的 20 个分支)。我找不到该怎么做? 最佳答案 这个问题有点令人困惑,因此,如果稍后出现更
我一直在尝试使用 jquery 创建一种效果,当您将鼠标移到一个 div 上时,整个 body 都会移动,并沿着它经过的点留下一条轨迹。我创建了一个可以使整个 body 移动的功能,但我找不到离开轨迹
我想在桌面上显示放大和缩小图标(控件),而仅在移动设备上浏览时显示 gps 图标。我正在使用这个 css https://unpkg.com/leaflet@1.1.0/dist/leaflet.cs
相关代码(索引为数组大小): typedef struct elemento { unsigned long linha; unsigned long coluna; doub
我有一个 div,因此当我单击时,它会切换为展开或缩回。它在所有浏览器上都运行良好,尽管有一点让我很感兴趣。在谷歌浏览器上,当它缩回时,它会在运动中留下细线。 www.rezoluz.com/logi
每当我的应用程序尝试通过调用 CreateDIBSection() 或使用 LR_CREATEDIBSECTION 标志调用 LoadImage() 来创建 DIB 部分时,它似乎都会成功返回。它返回
我想在 Protractor 测试中脱离 Selenium 控制流。 以下是我迄今为止遇到的步骤和问题: 1。逐个测试禁用它 我的第一个想法是使用 SELENIUM_PROMISE_MANAGER 以
我正在构建一个部署在 CentOS 7.2 上的 ASP.Net Core (netcore 1.1) 应用程序。 我有一个通过 System.Diagnostics.Process 调用外部进程(也
我正在为我的网站创建一个聊天小部件。用户将能够输入纯文本 - 没有 html。 为了消除 HTML 标记并允许用户使用“”,我正在接受他们的输入并在用户屏幕的输入上使用 strip_tags() 和输
我是一名优秀的程序员,十分优秀!