- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
不确定我是否正确地制定了标题,但问题来了。
我有一个云状的 SVG 路径,我想在 CSS 中使用 clip-path
属性。
<path d="M46.9819755,61.8637972 C42.0075109,66.8848566 35.0759468,70 27.4091794,70 C12.2715076,70 0,57.8557238 0,42.875 C0,32.9452436 5.3914988,24.2616832 13.4354963,19.534921 C14.8172134,8.52285244 24.3072531,0 35.8087666,0 C43.9305035,0 51.0492374,4.2498423 55.01819,10.6250065 C58.2376107,8.87215568 61.9363599,7.875 65.8704472,7.875 C78.322403,7.875 88.4167076,17.8646465 88.4167076,30.1875 C88.4167076,32.1602271 88.1580127,34.0731592 87.6723639,35.8948845 L87.6723639,35.8948845 C93.3534903,38.685457 97.2583784,44.4851888 97.2583784,51.1875 C97.2583784,60.6108585 89.5392042,68.25 80.0171204,68.25 C75.4841931,68.25 71.3598367,66.5188366 68.2822969,63.6881381 C65.5613034,65.4654463 62.3012892,66.5 58.7971106,66.5 C54.2246352,66.5 50.0678912,64.7384974 46.9819755,61.8637972 Z" fill="lightblue" />
当我在 HTML 中添加一个 SVG 元素并定义 <clipPath>
时使用该路径,浏览器将剪切路径定位在左上角。如果我对被剪裁的元素应用边距,则掩码不会链接并保持在其初始位置。
其他类似的线程指出 clipPathUnits="objectBoundingBox"
属性应添加到 <clipPath>
对象,但这似乎并不能解决我的问题。我什至将路径从绝对路径转换为相对路径并尝试过,但得到了相同的结果。
是否有可能以某种方式将剪切路径与被剪切的元素链接起来,以便在将定位应用于被剪切的元素时,剪切路径也会移动?
这里是相对路径,如果有帮助的话:
<path d="M46.9819755,61.8637972c-4.974,5.021,-11.906,8.136,-19.573,8.136c-15.137,0,-27.409,-12.144,-27.409,-27.125c0,-9.93,5.392,-18.613,13.436,-23.34c1.381,-11.012,10.871,-19.535,22.373,-19.535c8.122,0,15.24,4.25,19.209,10.625c3.22,-1.753,6.918,-2.75,10.852,-2.75c12.452,0,22.547,9.99,22.547,22.313c0,1.972,-0.259,3.885,-0.745,5.707l0,0c5.682,2.791,9.586,8.59,9.586,15.293c0,9.423,-7.719,17.062,-17.241,17.062c-4.533,0,-8.657,-1.731,-11.735,-4.562c-2.721,1.778,-5.981,2.812,-9.485,2.812c-4.572,0,-8.729,-1.761,-11.815,-4.636z fill="lightblue" />
以及一些测试 HTML/CSS。 (我已将 left
属性设置为 10px
,以便您看到出现剪辑问题)
.clippedElement {
width: 200px;
height: 200px;
position: absolute;
left: 10px;
top: 0;
background-color: lightblue;
-webkit-clip-path: url(#cloudClip);
-moz-clip-path: url(#cloudClip);
clip-path: url(#cloudClip);
}
<svg>
<defs>
<clipPath id="cloudClip">
<path d="M46.9819755,61.8637972 C42.0075109,66.8848566 35.0759468,70 27.4091794,70 C12.2715076,70 0,57.8557238 0,42.875 C0,32.9452436 5.3914988,24.2616832 13.4354963,19.534921 C14.8172134,8.52285244 24.3072531,0 35.8087666,0 C43.9305035,0 51.0492374,4.2498423 55.01819,10.6250065 C58.2376107,8.87215568 61.9363599,7.875 65.8704472,7.875 C78.322403,7.875 88.4167076,17.8646465 88.4167076,30.1875 C88.4167076,32.1602271 88.1580127,34.0731592 87.6723639,35.8948845 L87.6723639,35.8948845 C93.3534903,38.685457 97.2583784,44.4851888 97.2583784,51.1875 C97.2583784,60.6108585 89.5392042,68.25 80.0171204,68.25 C75.4841931,68.25 71.3598367,66.5188366 68.2822969,63.6881381 C65.5613034,65.4654463 62.3012892,66.5 58.7971106,66.5 C54.2246352,66.5 50.0678912,64.7384974 46.9819755,61.8637972 Z"
/>
</clipPath>
</defs>
</svg>
<div class="clippedElement"></div>
最佳答案
感谢 Robert's comment ,我能够解决我遇到的问题。
这是我用来将绝对路径转换为相对路径的 PHP 片段,因此值介于 0 和 1 之间。
$absolute_path = "M46.9819755,61.8637972 C42.0075109,66.8848566 35.0759468,70 27.4091794,70 C12.2715076,70 0,57.8557238 0,42.875 C0,32.9452436 5.3914988,24.2616832 13.4354963,19.534921 C14.8172134,8.52285244 24.3072531,0 35.8087666,0 C43.9305035,0 51.0492374,4.2498423 55.01819,10.6250065 C58.2376107,8.87215568 61.9363599,7.875 65.8704472,7.875 C78.322403,7.875 88.4167076,17.8646465 88.4167076,30.1875 C88.4167076,32.1602271 88.1580127,34.0731592 87.6723639,35.8948845 L87.6723639,35.8948845 C93.3534903,38.685457 97.2583784,44.4851888 97.2583784,51.1875 C97.2583784,60.6108585 89.5392042,68.25 80.0171204,68.25 C75.4841931,68.25 71.3598367,66.5188366 68.2822969,63.6881381 C65.5613034,65.4654463 62.3012892,66.5 58.7971106,66.5 C54.2246352,66.5 50.0678912,64.7384974 46.9819755,61.8637972 Z";
function regex_callback($matches) {
static $count = -1;
$count++;
$width = 98;
$height = 70;
if($count % 2) {
return $matches[0] / $height;
} else {
return $matches[0] / $width;
}
}
$relative_path = preg_replace_callback('(\d+(\.\d+)?)', 'regex_callback', $absolute_path);
由于剪切路径不是矩形,我无法将值除以一个数字,而是必须使用剪切路径本身的宽度和高度。
.clippedElement {
width: 98px;
height: 70px;
position: absolute;
left: 10px;
top: 0;
background-color: lightblue;
-webkit-clip-path: url(#cloudClip);
-moz-clip-path: url(#cloudClip);
clip-path: url(#cloudClip);
}
<svg width="98" height="70">
<defs>
<clipPath id="cloudClip" clipPathUnits="objectBoundingBox">
<path d="M0.47940791326531,0.88376853142857 C0.42864807040816,0.95549795142857 0.3579178244898,1 0.27968550408163,1 C0.12521946530612,1 0,0.82651034 0,0.6125 C0,0.47064633714286 0.055015293877551,0.34659547428571 0.13709690102041,0.2790703 C0.15119605510204,0.12175503485714 0.24803319489796,0 0.36539557755102,0 C0.44827044387755,0 0.52091058571429,0.060712032857143 0.56141010204082,0.15178580714286 C0.59426133367347,0.12674508114286 0.63200367244898,0.1125 0.67214742040816,0.1125 C0.79920819387755,0.1125 0.90221130204082,0.25520923571429 0.90221130204082,0.43125 C0.90221130204082,0.45943181571429 0.89957155816327,0.48675941714286 0.89461595816327,0.51278406428571 L0.89461595816327,0.51278406428571 C0.95258663571429,0.55264938571429 0.99243243265306,0.63550269714286 0.99243243265306,0.73125 C0.99243243265306,0.86586940714286 0.91366534897959,0.975 0.81650122857143,0.975 C0.77024686836735,0.975 0.72816159897959,0.95026909428571 0.69675813163265,0.90983054428571 C0.66899289183673,0.93522066142857 0.63572744081633,0.95 0.59997051632653,0.95 C0.55331260408163,0.95 0.51089684897959,0.92483567714286 0.47940791326531,0.88376853142857 Z"></path>
</clipPath>
</defs>
</svg>
<div class="clippedElement"></div>
关于css - 如何将 clipPath 应用于 div,其中 clipPath 位置相对于 div 位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29495919/
当我编译我的 ionic 4 应用程序时,我得到这个错误:不开始。但是,如果我更改代码中的某些内容并再次编译,代码将成功编译。我查了一下它可能与路径(绝对/相对)有关。但在这些问题中,解决方案是使用相
现在我发现当我打开终端时,它总是显示这些消息: bash: /usr/local/texlive/2012/texmf/doc/man:: No such file or directory bash
我有一些具有不同 url 前缀的嵌套模块。现在我想在一个模块中导航而不指定前缀(在我的模块中,我不想知道在哪个前缀下可以访问该模块)。 这些是我的 app.module 的路线: const APP_
我想在java中进行日期范围搜索假设我想搜索从2019年10月22日到当前日期。但问题是在两周的 block 大小中进行日期范围搜索(考虑到这可能会有所不同,但以周为单位),例如这里开始日期将为 20
我正在尝试实现移动到单击鼠标的点。 但是我遇到了 X 轴镜像行为的问题。当我点击顶部 -> 它移动到底部,当我点击底部 -> 它移动到顶部。 这里是原始位置的例子 我点击了屏幕上有红十字的位置。 但它
尝试使用以下方法让对象跟随光标: int mx =(int) MouseInfo.getPointerInfo().getLocation().getX()-50; Player.setX(mx);
我有 4 个 JButton 设置在彼此下方。我希望当用户水平调整框架大小时它们左右移动。 例如:帧大小:400,400 按钮位置:300,200 现在我将框架大小调整为:600,400 Button
我想要做的是将一个元素(我用作背景的彩色 UIView)定位到我的 Storyboard 中,以便它从 ImageField 的中间开始。并填充所有内容,直到屏幕底部。我正在使用 xcode7 和 s
我正在编写一些 C++ 代码,它主要为共享它的其他两个项目提供一个类,但也包括一个小程序,以便在需要时可以从命令行使用它。该类必须加载一些资源,这些资源被写入资源文件夹中的多个文件。这些文件的路径当然
我能以某种方式随时获得相对于帧初始引用的加速度矢量吗? (我的意思是:xArbitraryZVertical 模式下的帧引用,我第一次得到 Core Motion 数据)我试图做什么:每次我得到 CM
saved 我希望 div#one 在父 div 的左边缘和提交按钮的左边缘之间的空间居中。 最佳答案 还有几种方法: saved 很难说 saved 文本没有居中在容器 d
所以我在页面上有一个带有背景图像的对象,在 mousemove 上它移动了相对于鼠标的背景位置。但我遇到的唯一问题是在鼠标进入对象时将背景图像动画化到鼠标的当前位置。 我能够将背景位置动画化回其原始位
我的一个网站中有一个图像缩放属性。我想相对于 div 的中心缩放图像。 缩放功能如下。 function zoom(zm) { img=document.getElementById("pic"
我正在尝试调整水平导航栏左侧的导航栏 Logo 的大小,然后让其余导航栏元素占据相同的垂直空间并在空间中垂直居中。导航栏元素目前不使用完整的垂直空间。我尝试过的每个尺寸属性都产生了另一个问题。感谢所有
我有一些 h2 文本当前在移动 View 中左对齐,位于居中的 div 上方。我怎样才能将它对齐到移动 View 中相对于 div 的左对齐(应用下面的 CSS 中提供的媒体查询)? CodePen
我想让文本元素(在本例中为 h2 副标题)居中,方法是让它忽略左侧的 float 图像。我更喜欢 h2 副标题与 h1 标题垂直居中对齐。有没有什么办法可以单独使用 CSS 来做到这一点? 这是一个示
您好! 我在这个网站上工作,但我一直遇到同样的问题。当我把边距放在百分比而不是像素时,它似乎是从包装器或页面中获取百分比。可能是一些愚蠢的错误,但我并没有真正使用过百分比。无论如何,我所说的类是“ L
我很好奇这是怎么做到的,我做了类似的东西,例如 Home About Search bar Container
我希望我的 firstLabel 位于同一行文本字段的右侧。 //css input[type="text"]{ display:block; margin-botto
我正在尝试绘制多边形,并希望能够单击我的框架以获取鼠标坐标,以便更快地将心理图像转换为 x/y 值。 我在用 System.out.println("("+ MouseInfo.getPointerI
我是一名优秀的程序员,十分优秀!