- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我有一个 SVG 图标,其中包含一些蒙版形状:
book-1
: 被 clipPath 屏蔽 mask-1
book-2
: 被 clipPath 屏蔽 mask-2
book-3
: 未屏蔽,无需转换关于 :focus
/:hover
我要mask-1
(但不是 book-1
)和 book-2
(但不是 mask-2
)进行转换。够直截了当……
<a href="whatevs" class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44">
<defs>
<style>
#book-1 {clip-path:url(#mask-1);}
#book-2 {clip-path:url(#mask-2);}
</style>
<clipPath id="mask-1">
<path class="nudge" fill="none" … />
</clipPath>
<clipPath id="mask-2">
<path fill="none" … />
</clipPath>
</defs>
<g id="book-1">
<path fill="#fff" … />
</g>
<g id="book-2">
<path fill="#fff" class="nudge" … />
</g>
<path fill="#fff" … /> <!-- book-3 -->
</svg>
</a>
/* CSS */
.icon .nudge {
transition: transform 0.2s ease-in;
}
.icon:focus .nudge,
.icon:hover .nudge {
transform: translate(-2px, 2px);
}
但是当一个页面中有多个相同图标的实例时,乐趣就开始了。
我在 CodePen 上有 3 支笔,每支都有 2 个链接图标实例,其中:
book-1
的类名和 book-2
mask-1
和 mask-2
book-1
, mask-1
, book-2
和 mask-2
<symbol>
通过 <use>
迭代的图标实例在页面中最佳答案
自 clip-path
需要 svg 的 ID def
child ,只有其中一个<clipPath>
如果一个页面上放置了多个图标,则将考虑定义。这就是转换 <clipPath>
的原因elements 是不行的,因为所有引用它的元素都会受到影响。因此,我们需要一个不会根据 :hover
移动或修改这些元素的解决方案。的 :focus
.
幸运的是,可以使用以下技巧“不”移动元素本身而只移动分配给元素的剪切路径:
可以在下面的代码片段中找到基于您提供的代码的此技巧的示例:
a .nudge, a .unnudge {
transition: transform 0.2s ease-in;
}
a:focus,
a:hover {
background-color: black;
}
a:focus .nudge,
a:hover .nudge {
transform: translate(-2px, 2px);
}
a:focus .unnudge,
a:hover .unnudge {
transform: translate(2px, -2px);
}
* {
box-sizing: border-box;
}
a {
display: block;
background-color: red;
padding: 0.5rem;
border-radius: 50%;
transition: background-color 0.2s ease-in;
width: 60px;
height: 60px;
}
body {
font-family: sans-serif;
line-height: 1.5;
max-width: 36em;
color: #333;
}
code {
background: #e5e5e5;
font-size: 1.125em;
border-radius: 2px;
}
<p>Instance 1:
<a href="#">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="44" height="44">
<defs>
<style>
.book-1{clip-path:url(#mask-1-1);}
.book-2{clip-path:url(#mask-2-1);}
</style>
<clipPath id="mask-1-1">
<path fill="none" d="M13.823,33.1V18.293a4.738,4.738,0,0,1,1.4-3.371S24.6,5.531,25.085,5.048L20.019-.019H8.143V33.1Z"/>
</clipPath>
<clipPath id="mask-2-1">
<path fill="none" d="M31.814,10.117,21.12,20.822a4.733,4.733,0,0,0-1.4,3.371V39H12V7H28.7Z"/>
</clipPath>
</defs>
<g class="nudge book-1" >
<path fill="#fff" class="unnudge" d="M22.736,5.72a1.193,1.193,0,0,0-1.686,0l-7.516,7.516a1.191,1.191,0,0,1-1.685-1.685l7.516-7.516a1.192,1.192,0,0,0-1.686-1.686L10.163,9.865h0a3.565,3.565,0,0,0-1.047,2.529h0V26.625h0a3.576,3.576,0,0,0,6.1,2.528h0l7.516-7.516a1.188,1.188,0,0,0,.349-.843V6.563A1.188,1.188,0,0,0,22.736,5.72Z"/>
</g>
<g class="book-2">
<path fill="#fff" class="nudge" d="M21.723,22.193a4.733,4.733,0,0,1,1.4-3.371l5.865-5.871v-.488a1.192,1.192,0,0,0-2.035-.843l-7.516,7.516a1.192,1.192,0,0,1-1.686-1.686l7.516-7.516a1.191,1.191,0,1,0-1.685-1.685l-7.516,7.516a3.561,3.561,0,0,0-1.048,2.528h0V32.524h0a3.577,3.577,0,0,0,6.105,2.529h0l.6-.6Z"/>
</g>
<path fill="#fff" d="M34.535,17.52a1.19,1.19,0,0,0-1.685,0l-7.516,7.516a1.192,1.192,0,0,1-1.686-1.686l7.516-7.516a1.192,1.192,0,1,0-1.686-1.685l-7.516,7.516h0a3.564,3.564,0,0,0-1.047,2.528h0V38.424h0a3.576,3.576,0,0,0,6.1,2.529h0l7.516-7.516a1.188,1.188,0,0,0,.349-.843V18.363A1.188,1.188,0,0,0,34.535,17.52Z"/>
</svg>
</a>
</p>
<p>Instance 2, exact copy of instance 1:
<a href="#">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="44" height="44">
<defs>
<style>
.book-1{clip-path:url(#mask-1-1);}
.book-2{clip-path:url(#mask-2-1);}
</style>
<clipPath id="mask-1-1">
<path fill="none" d="M13.823,33.1V18.293a4.738,4.738,0,0,1,1.4-3.371S24.6,5.531,25.085,5.048L20.019-.019H8.143V33.1Z"/>
</clipPath>
<clipPath id="mask-2-1">
<path fill="none" d="M31.814,10.117,21.12,20.822a4.733,4.733,0,0,0-1.4,3.371V39H12V7H28.7Z"/>
</clipPath>
</defs>
<g class="nudge book-1" >
<path fill="#fff" class="unnudge" d="M22.736,5.72a1.193,1.193,0,0,0-1.686,0l-7.516,7.516a1.191,1.191,0,0,1-1.685-1.685l7.516-7.516a1.192,1.192,0,0,0-1.686-1.686L10.163,9.865h0a3.565,3.565,0,0,0-1.047,2.529h0V26.625h0a3.576,3.576,0,0,0,6.1,2.528h0l7.516-7.516a1.188,1.188,0,0,0,.349-.843V6.563A1.188,1.188,0,0,0,22.736,5.72Z"/>
</g>
<g class="book-2">
<path fill="#fff" class="nudge" d="M21.723,22.193a4.733,4.733,0,0,1,1.4-3.371l5.865-5.871v-.488a1.192,1.192,0,0,0-2.035-.843l-7.516,7.516a1.192,1.192,0,0,1-1.686-1.686l7.516-7.516a1.191,1.191,0,1,0-1.685-1.685l-7.516,7.516a3.561,3.561,0,0,0-1.048,2.528h0V32.524h0a3.577,3.577,0,0,0,6.105,2.529h0l.6-.6Z"/>
</g>
<path fill="#fff" d="M34.535,17.52a1.19,1.19,0,0,0-1.685,0l-7.516,7.516a1.192,1.192,0,0,1-1.686-1.686l7.516-7.516a1.192,1.192,0,1,0-1.686-1.685l-7.516,7.516h0a3.564,3.564,0,0,0-1.047,2.528h0V38.424h0a3.576,3.576,0,0,0,6.1,2.529h0l7.516-7.516a1.188,1.188,0,0,0,.349-.843V18.363A1.188,1.188,0,0,0,34.535,17.52Z"/>
</svg>
</a>
</p>
请注意,这个解决方案并不完美,具有两个相反运动的技巧应该总结为没有运动,可能会导致 .book-1
有点抖动。在某些浏览器(例如 Firefox)上。
关于css - :focus/:hover for multiple instances of same icon 上的 clipPath 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55457330/
我有一台运行 Android 4.2.2 的 ASUS Nexus 7 我的应用程序在运行以下代码时在 sk_malloc_flags 中生成一个 SIGSEGV: static Picture cr
不确定我是否正确地制定了标题,但问题来了。 我有一个云状的 SVG 路径,我想在 CSS 中使用 clip-path属性。 当我在 HTML 中添加一个 SVG 元素并定义 时使用该路径,浏览器将
我正在尝试使用 svg 创建一个 clipPath 图像。我正在尝试使用 SVG 的 native clipPath 方法来完成它。 My problem is that if I use a pat
如何创建上面的自定义clipPath小部件? (我附上了截图) 我尝试过,但输出不准确 Clipper 类 class MessageClipper extends CustomClipper {
我遇到了这个错误。 Assertion failed: org-dartlang-sdk:///flutter_web_sdk/lib/_engine/engine/surface/path/path
我的CustomClipper从左上角开始,但是,我希望它从右上角开始。 这是我的代码: 快船队: class ProfileBarClipper extends CustomClipper {
这是 this 的延续问题。 这是代码:Plunker 我现在想做的是更新 clipPath 与其他所有内容一致,我无法安静地弄清楚 我尝试了各种方法让它以平滑的方式转换,但每次都得到相同的结果。pl
我想生成一个小部件,其剪辑路径与给定图像中的剪辑路径相似。我在这里谈论的是应用程序屏幕的白色部分,其中包含信息。 下面的代码是我在实验时尝试的,但失败了! Path getClip(Size siz
简而言之,我有一个使用 clipPath 屏蔽的图像,因此它可以在 IE 9+ 中工作。问题是我需要在悬停时隐藏蒙版以显示完整图像,然后在鼠标移开时重新应用。我现在拥有的脚本不起作用。笔在下面。我对
这个问题已经有答案了: 奥 git _a (1 个回答) 已关闭 7 年前。 我有一个图形,上面有三个折线图。 我在图表中添加了一个clipPath,覆盖了所有三个折线图。但每个折线图的顶部都被砍掉了
我想创建一个像这样的路径: 但实际结果边框不好: 现在我想知道如何使用 ClipPath 实现完全圆角。 代码是: class MyClipper extends CustomClipper {
我正在循环增加 clipPath 的大小。循环内部还有另一个循环,它创建了更多的 clipPaths,我用它来绘制降低的 alpha,以便获得过渡效果。但随着 clipPath 大小的增加,转换变得缓
向导, 我在处理 clippath 上的鼠标悬停事件时遇到了一些问题。出于某种原因,它没有触发,我认为这是因为元素正在剪裁 Dude 的图像。 我的目标是提醒悬停元素的用户标识(示例中的 1、2 或
我试图将一个带有 clipPath 的 div 放在页脚中另一个 div 的顶部。这是我要完成的工作的图像。从理论上讲,这听起来很简单,但我似乎在裁剪路径 SVG 的放置和缩放方面苦苦挣扎。 我为剪辑
我有一个 SVG 导航轮,我已经把它放在 jsfiddle SVG navigation wheel 上 这里是实际的 SVG 代码: wheelv2
我正在尝试创建一个 transparent arrow over an image通过 SVG 和 clipPath。这是 jsfiddle与工作解决方案。 当我尝试在我的 div 容器中应用此解决方
我在使用 Canvas clipPath 时收到 UnsupportedOperationException。 这发生在 HTC Sensation XE (4.0.3) 上。它在其他 4.0.3 设
我在 Canvas 上创建了一个圆形剪辑路径,并且有一列数字在 Canvas 上进行了动画处理,因此我看到数字在剪辑部分中进行动画处理并进行动画处理。这是裁剪代码: mClipPath.addCirc
对于我的生活,我无法弄清楚为什么 SVG 不会呈现以下图形: 我发现了以下两件事: 当裁剪路径为基本圆时,图像会被正确裁剪。 当未设置剪辑路径时,图像可以正确呈现。
我有一个布局,里面有几个 View ——工具栏、recyclerview 和几个分隔符(它们是简单的 View ,高度为 2dp,宽度为 match_parent)。我想在布局上放置一个 mask —
我是一名优秀的程序员,十分优秀!