Wordpress CSS 和内联 SVG

Question

我正在尝试对图像使用 clip-path 属性，为了使其与 Firefox 完全兼容，我需要内联 SVG 剪辑路径，然后使用其 ID 在 CSS 文件中引用它 (@987654321 @)

问题是一旦加载到 Wordpress 中，CSS 属性 URL 会被 Wordpress 重写，因此它无法从页面中找到实际的 SVG。我写了以下内容：

clip-path: url("#clipping");

但是会呈现完整路径（我复制我的 MAMP URL 以澄清）：

clip-path: url("http://enzuelo:8888/wp-content/themes/enzuelo-child/single-projects.php#clipping");

有人知道我如何在 CSS 文件中引用该 ID 以使其与 Wordpress 一起使用吗？

Answer 1

虽然在您链接到的问题/答案中并不完全清楚，但您必须在 single-projects.php 模板内的 <style></style> 标记中添加 clip-path css 花絮。基本上svg和css代码必须在同一个文件中，css才能通过id找到svg。

希望这会有所帮助。你可以找到一个 jsfiddle here（取自this answer）。