- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
初始SVG
图与 pattern
:
<svg width="200" height="200" viewBox="0 0 100 100">
<defs>
<pattern id="img-dotted-dots" x="0" y="0" height=".08" width="7.69%">
<circle cx="2" cy="2" fill="white" r="0.8"></circle>
</pattern>
<mask id="img-dotted-mask">
<rect width="100" height="100" fill="url(#img-dotted-dots)"></rect>
</mask>
</defs>
<path d="M0 0 H 100 V 100 H 0 Z" mask="url(#img-dotted-mask)" fill="#1063B1"></path>
</svg>
需要实现:
SVG
的一个实例图与 pattern
引用CSS
作为clip-path
.
我尝试创建SVG clipPath
元素并绑定(bind)到 CSS clip-path
通过这种方式
.figure {
width: 300px;
height: 300px;
clip-path: url(#img-dotted-clip-path);
background-color: #1063B1;
}
<div class="figure"></div>
<svg width="0" height="0" viewBox="0 0 100 100">
<defs>
<clipPath
clipPathUnits="objectBoundingBox"
id="img-dotted-clip-path">
<pattern
patternUnits="objectBoundingBox"
patternContentUnits="objectBoundingBox"
x="0" y="0" height="0.1" width="0.1">
<circle cx="0" cy="0" fill="white" r="0.5"></circle>
</pattern>
</clipPath>
</defs>
</svg>
没有任何反应。预期结果 - 与前面的代码片段相同。
比较:
如果我使用SVG rect
- CSS clip-path
作品。如果pattern
- 没有
.figure {
width: 300px;
height: 300px;
clip-path: url(#img-dotted-clip-path);
background-color: #1063B1;
}
<div class="figure"></div>
<svg width="0" height="0" viewBox="0 0 100 100">
<defs>
<clipPath
clipPathUnits="objectBoundingBox"
id="img-dotted-clip-path">
<rect width="1" height="1"></rect>
</clipPath>
</defs>
</svg>
最佳答案
剪辑路径中唯一有效的是:
此外,您还可以使用动画元素等为剪辑路径设置动画。但是,仅使用这些元素的形状。图案、过滤器等效果将被忽略。
获得想要的剪切路径效果的唯一方法是添加大量 <circle>
元素到你的 <clipPath>
.
<clipPath>
<circle>
<circle>
<circle>
<circle>
... etc ...
</clipPath>
但是您可以改用面具。面具允许模式。
.figure {
width: 300px;
height: 300px;
-webkit-mask: url(#img-dotted-mask);
mask: url(#img-dotted-mask);
background-color: #1063B1;
}
<p>This only works in Firefox</p>
<div class="figure"></div>
<svg width="0" height="0">
<defs>
<pattern id="img-dotted-pattern"
viewBox="0 0 1 1"
patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<rect width="1" height="1" fill="black"/>
<circle cx="0.5" cy="0.5" fill="white" r="0.15"></circle>
</pattern>
<mask id="img-dotted-mask">
<rect width="2000" height="2000" fill="url(#img-dotted-pattern)"/>
</mask>
</defs>
</svg>
然而,内联应用于 HTML 元素的 SVG 掩码(如我上面的示例)仅适用于 Firefox。要让 SVG mask 在 Chrome 中工作,您需要使用 mask
或 mask-image
使用外部或数据 URL(正如 Temani 在他们的回答中所做的那样)。
关于css - 如何通过 CSS clip-path 属性将 SVG clipPath 与 Pattern 一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60715241/
这是我的作业 What does echo PATH $PATH \$PATH do? 我不知道它是如何工作的。 echo PATH打印“路径” $PATH创建一个“PATH”变量......也许?
我想弄清楚两者之间的区别 路径=路径+[节点1] 路径+=[节点1] path.append(node1) 我得到的是 path = path + [node1] 的正确路径,但不是其他两个。 def
我使用 Robot 框架在 Ride 中创建了一个测试用例。运行时出现错误。 我更新了python的路径。我更新了库和 Ride。我换了文件夹还是不行 *** Settings *** Documen
我尝试使用额外的功能自定义 pathlib.Path()。特别是,我真的很喜欢使用上下文管理器作为移入和移出目录的方法。我一直在使用它,但我似乎在让 Path() 与自定义上下文管理器一起工作时遇到错
编辑:基于 Ulf Rompe 的评论,重要的是使用“1”而不是“0”,否则您将破坏 sys.path . 我已经做 python 很长一段时间了(一年多),我总是很困惑为什么人们建议你使用 sys.
我有兴趣这样做的原因是因为我的路径中有一部分将保持不变,但我希望将其与其所有父部分一起删除。 所以如果我们说, some/unknown/path/foo/bar/baz 我想回去 bar/baz 但
在几个 SO 的问题中,有这些行可以访问代码的父目录,例如os.path.join(os.path.dirname(__file__)) returns nothing和 os.path.join(o
我已经在我的 Linux 中安装了 anaconda 来导入 python 包。 安装 anaconda 后,我无法在 python 中使用 anaconda,经过一番搜索后我发现输入此命令我能够使用
哪个更好用,为什么?我的意思是这两个命令在哪些方面不同以及如何不同?性能、可读性…… new FileInfo(path).Name 或 Path.GetFileName(path) 最佳答案 因为您
这不适用于某些设备。 在三星设备中,他们不允许使用下载管理器下载文件。 我已经在 list 中定义了权限并获得了运行时权限。 DownloadManager downloadManager = (Do
我想知道在这个例子中使用 Paths.get() 和 Path.resolve 有什么区别: public static void main(String[] args) { Path p1
目前我正在开发一个转换由 Inkscape 创建的 svg-paths 的应用程序。现在我不清楚关于绝对和相对路径组合的路径规范。规范是否说明了同时包含相对和绝对坐标的路径定义? 特别是关于绝对贝塞尔
我正在编写脚本,我需要在用户的 $PATH 上查找命令并获取该命令的完整路径。问题是我不知道用户的登录 shell 是什么,或者他们的 do 文件中可能有什么奇怪的东西。我将 bourne shell
Metalsmith 的文档对 path() 函数没有太多解释:#path(paths...): Resolve any amount of paths... relative to the work
我知道我可以通过 regedit 更改我的 wine PATH,但实际上我只需要为一次运行更改 PATH。 例如,我的软件名为frontend.exe,这取决于example/mylib.dll,我需
因此,绝对路径是一种到达某个文件或位置的方法,描述了它的完整路径、完整路径,并且它依赖于操作系统(Windows 和 Linux 的绝对路径,例如,不同)。另一方面,相对路径是从当前位置 ..(两个点
我对编程有点陌生(不是真的,但我仍在学习 - 我们不是吗?)。虽然我了解 Java 和 Python,并且了解 C、C++、JS、C#、HTML、CSS 等(并且我可以在终端中很好地导航),但我不熟悉
我对编程有点陌生(不是真的,但我仍在学习 - 我们不是吗?)。虽然我了解 Java 和 Python,并且了解 C、C++、JS、C#、HTML、CSS 等(并且我可以在终端中很好地导航),但我不熟悉
这个问题不太可能对任何 future 的访客有帮助;它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关,通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用,visit the
使用环境变量(如 PATH)作为 $PATH 或 ${PATH} 有什么区别? 最佳答案 在大多数情况下没有区别。唯一重要的是你是否想在扩展后包含尾随文本。例如,假设您的 PATH 包含字符串 FOO
我是一名优秀的程序员,十分优秀!