CSS：仅将mix-blend-mode属性应用于特定元素
我想使用mix-blend-mode属性使一些特定的SVG路径获取笔划上的背景图像，以使路径看起来好像是一个擦除路径。以下代码是我所达到的。但是，正如您所看到的，混合混合属性会影响在笔划上没有任何背景图像时显示的其他路径。因此，我想要一种方法将mix-blend-mode属性应用于仅分离元素组并保持其他元素不受影响。
g.erasing image{
mix-blend-mode: lighten;
}<html>
<body>
<svg height="400" width="450">
<!-- this is the background image -->
<image id="background" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="400" height="450"></image>
<g class="drawing">
<!-- these are the drawing paths -->
<path d="M 100 350 l 150 -300" stroke="red" stroke-width="8" fill="none" />
<path d="M 250 50 l 150 300" stroke="red" stroke-width="8" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="8" fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="8" fill="none" />
</g>
<g class="erasing">
<!-- these are the erasing paths -->
<path d="M 0 0 L 400 450" stroke="black" stroke-width="20" />
<path d="M 0 0 L 200 300" stroke="black" stroke-width="20" />
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="400" height="450"></image>
</g>
</svg>
</body>
</html>
以下是我所寻求的。
注意：我可以使用屏蔽来完成此操作，但在某些浏览器中它很慢。
1 个答案:
答案 0 :(得分：0)
您可以将<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- This code is not the actually code, this code is just for an example -->
<div id="#formMember">
<h3>Input Member</h3>
<form name="fmember" onsubmit="return validateMember()">
<div>
<label>shop</label>
<select id="shop">
<option value="">Choose The Shop..</option>
<option value="1">Shop 1</option>
<option value="2">Shop 2</option>
</select>
</div>
<hr />
<div id="input">
<!-- This is actually use PHP for loop, i dont know how to use it at JsFiddle
<?php
$max = 3; //so sometimes we can change it if want to add more fields.
for($i=1; $i<$max; $i++) { ?>
<div class="form-group">
<span class="error<?php echo $i; ?>" class="label label-danger"></span>
<label>Username <?php echo $i; ?></label>
<input type="text" name="user[<?php echo $i; ?>]">
<label>Password <?php echo $i; ?></label>
<input type="password" name="pass[<?php pass $i; ?>]">
<span class="errorp<?php echo $i; ?>" class="label label-danger"></span>
</div>
<?php } ?>
-->
<h4>This is just an example after this form submitted</h4>
<div class="form-group">
<span id="error1" class="label label-danger">Username 1 Must be Filled !<br></span>
<label>Username 1</label>
<input type="text" name="user[1]">
<label>Password 1</label>
<input type="password" name="pass[1]">
<span id="errorp1" class="label label-danger">Password 1 Must Be Filled !<br></span>
</div>
<div class="form-group">
<span id="error2" class="label label-danger">Username 2 Must Have Minimum 2 Characters !<br></span>
<label>Username 2</label>
<input type="text" name="user[2]" value="a">
<label>Password 2</label>
<input type="password" name="pass[2]" value="xxxxx">
<span id="errorp2" class="label label-danger"></span>
</div>
<div class="form-group">
<span id="error3" class="label label-danger"></span>
<label>Username 3</label>
<input type="text" name="user[3]">
<label>Password 3</label>
<input type="password" name="pass[3]">
<span id="errorp3" class="label label-danger"></span>
</div>
<div class="form-group">
<span id="error4"></span>
<label>Username 4</label>
<input type="text" name="user[4]" value="username2">
<label>Password 4</label>
<input type="password" name="pass[4]">
<span id="errorp4" class="label label-danger">Password 4 Must Be Filled !<br></span>
</div>
<div class="form-group">
<span id="error5"></span>
<label>Username 5</label>
<input type="text" name="user[5]">
<span id="errorp5"></span>
<label>Password 5</label>
<input type="password" name="pass[5]">
</div>
<button type="submit" class="col-sm-offset-2 btn btn-primary">
Submit
</button>
</div>
</form>
</div>元素与g一起使用，以指定isolation: isolate;效果下的元素。
mix-blend-modecircle{
mix-blend-mode: lighten;
}
g{
isolation: isolate;
}
但在这种情况下，我认为你应该使用<svg width="200px" height="200px">
<rect width="100%" height="100%" fill="pink"/>
<circle cx="100" cy="80" r="60" fill="red"/>
<circle cx="70" cy="130" r="60" fill="green"/>
<circle cx="130" cy="130" r="60" fill="blue"/>
</svg>
<svg width="200px" height="200px">
<rect width="100%" height="100%" fill="pink"/>
<g>
<circle cx="100" cy="80" r="60" fill="red"/>
<circle cx="70" cy="130" r="60" fill="#0f0"/>
<circle cx="130" cy="130" r="60" fill="blue"/>
</g>
</svg>元素。
maskg.drawing{
mask: url(#erasing);
}
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？