代码之家 › 专栏 › 技术社区 › Neekoy

基于SVG模式分离div[复制]

svg html

Neekoy · 技术社区 · 6 年前

我知道我问的问题没有提供任何代码,但是我的SVG知识非常基础,我不确定这是否可以做到。

我有以下两个 divs 它们之间有一个SVG路径:

是否可以(至少表面上)根据SVG模式将div分开?基本上我想让他们有不同的颜色或图像。感谢您的帮助:)

1 回复 | 直到 6 年前

enxaneta 6 年前

我将使用SVG作为 <hr> 元素,我将把div放在 <人力资源部; 柔性容器中的元素。

div{flex:1 1 40%; height:100px; border:1px solid #d9d9d9;}
hr{
  flex:1 1 10%;
  border:none;
  background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat');
background-repeat: no-repeat;
background-size:contain;
background-position: center; }
article{display:flex;}

<article>
<div></div>
<hr>
<div></div>
</article>

推荐文章

Aaron · 使用feTurbulence SVG标记模拟Musgrave纹理动画

1 年前

Michael Lynch · 如何使用包来构建导入SVG的React组件库?

1 年前

Chris Barr · 为什么带有<defs>的SVG在转换为<symbol>时会丢失渐变?

1 年前

HTML · 如何使用css使任何SVG图像灰度化?

2 年前

JohnB · 将<svg>资源放在</body>之后合法吗?

2 年前

Hashim Aziz · 为什么使用SVG Core设置FontAwesome在默认情况下会禁用这些选项?

2 年前

Sougata Mukherjee · 如何同时悬停svg和文本

2 年前

Basj · 即使距离为3像素,也能检测到SVG线上的点击

2 年前

jana · 在带有javascript的svg中的锚点中插入rect元素不起作用

2 年前

Developer · 如何在SVG图例中将文本悬停在rect或legendcells上

2 年前