Question

如果我能找到解决方法，我会被吹嘘！想要将SVG剪辑集中在周围的div中，如下例所示：

http://jsfiddle.net/ztfdv9qh/ - 请参阅链接，因为SVG很长！

<div class="svg-wrapper">
    <div class="svg-clipped"></div>
</div>

Answer 1

好吧，所以我花了更多的时间玩这个比我想要的更多，不幸的是，我仍然觉得有必要用这个信息为我的“回答”做准备：我希望别人有更好的答案。

话虽如此，我可以找到可能的选择：

使用transform: translate(x,y)强制clippath进入中心。这可能不是你想要的，因为它需要一个固定的宽度空间。
在clipPathUnits="objectBoundingBox"上设置<clippath>。这会将坐标系更改为相对于剪切路径所适用的元素的边界框。它也获得与此边界框相同的宽度和高度。这听起来很棒，直到我找到了大的“但是”：你<path>中使用的点的坐标需要写成[0,1]范围内的值。这意味着您需要重写<path>元素。这是一个reference，可以更好地解释此选项。

祝你好运！

Answer 2

将.svg-clipped更改为：

.svg-clipped {
  -webkit-clip-path: url(#svgPath);
  clip-path: url(#svgPath);
  background: #000;
  width: 300px;
  height: 150px;
}

并将<center>放在<div class="svg-wrapper">之前的第一个</center>中，并在</svg>之后放置.svg-wrapper代码末尾！还要删除你风格的backgroundPositionX backgroundPositionY borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent课程。

使用CSS将SVG剪切路径居中

2 个答案: