SVG defs上的鼠标事件(掩码)
SVG defs上的鼠标事件(掩码)是指在SVG（可缩放矢量图形）中，通过使用defs元素来定义一组可重用的元素或属性。鼠标事件(掩码)是一种特殊类型的事件，它允许开发者在SVG图形中定义和处理与鼠标交互相关的事件。
SVG defs元素是一个容器元素，用于存放可重用的SVG元素或属性。它通常用于定义一些共享的样式、滤镜、渐变等，以便在整个SVG文档中重复使用。在defs元素中定义的元素或属性可以通过使用<use>元素在其他地方进行引用。
鼠标事件(掩码)是一种用于处理鼠标交互的事件，包括鼠标点击、鼠标移动、鼠标悬停等。通过在SVG defs元素上定义鼠标事件(掩码)，可以将特定的鼠标交互行为应用于多个SVG元素，从而实现代码的复用和简化。
在SVG中，可以使用以下鼠标事件(掩码)：
- onclick：当鼠标点击元素时触发的事件。
- ondblclick：当鼠标双击元素时触发的事件。
- onmousedown：当鼠标按下元素时触发的事件。
- onmouseup：当鼠标释放元素时触发的事件。
- onmousemove：当鼠标在元素上移动时触发的事件。
- onmouseover：当鼠标移动到元素上方时触发的事件。
- onmouseout：当鼠标移出元素时触发的事件。
通过在SVG defs元素上定义这些鼠标事件(掩码)，可以在其他SVG元素中引用并实现相应的鼠标交互效果。
腾讯云提供了一系列与SVG相关的产品和服务，例如腾讯云云服务器（CVM）、腾讯云对象存储（COS）等。这些产品可以帮助用户在云端部署和管理SVG图形，实现高可用性和可扩展性。具体产品介绍和相关链接请参考腾讯云官方网站。
相关·内容
? 背景图像上有svg。SVG是一个中间有圆孔的正方形(举个例子)。背景图像将通过圆圈出现。 我想用鼠标拖动这个圆圈。但是如何从javascript访问svg内部的defs还不清楚。我可以更改属性，但onclick事件不能对它们起作用。 这是我的SVG，我想用id = my_mask访问元素上的鼠标事件 <svg>
<defs>
<mask id="hole">
<rect width="100%" height="100%" fill="#fff"/&g
浏览 16提问于2019-04-05得票数 2
1回答
我正在尝试一些非常简单的测试，用我在html内容中创建的SVG形状掩蔽。我尝试过不同的选择：
口罩，-webkit-面具
面具-图像，-webkit-面具-图像
不同的MaskUnits和MaskContentUnits
面罩类型:亮度或不亮度
我做不到，我必须做一些错误和愚蠢的事情。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="vi
浏览 4提问于2015-06-27得票数 2
1回答
我已经创建了一个动画，其中2个图像被两个不同的内嵌svg多边形掩蔽。Img1出现，然后它的多边形<clipPath>动画。然后Img2出现，然后是它的多边形<clipPath>动画。所有这些都是它应该做的，只是图像应该互相堆叠在一起，这样img2就可以最终掩盖img1。相反，Img2出现在img1下面。
每个图像都是在<svg>中设置的，所以我尝试将每个<svg>设置在自己的<div>中，并将位置设置为绝对值。我还研究了如何修改<svg>视图框。这两件事都没有用。很明显我错过了什么或者做错了什么。有人能帮忙吗？
是一个工作
浏览 2提问于2015-12-14得票数 1
回答已采纳
3回答
SVG单元包围盒覆盖元件
、、、
我遇到的问题是SVG的透明部分仍然覆盖下面对象的鼠标事件。一个，它显示了一个非常简化的示例。起初，我认为这是一个问题，所有的项目都是独立的SVG元素，这些元素都嵌入了object标记，但是即使是内联元素，比如页面中的示例，也会出现这个问题。
如果鼠标在任一圆圈上按需要改变指针，但如果鼠标悬停在红色圆圈的边界框重叠的蓝色圆圈上，则指针交互就会丢失。
我想找个简单的方法让这些东西通过。我听说使用css pointer-events属性可以解决这个问题，但是如果我把它放在任何更高的元素上，作为'none'，它似乎也会删除所有子事件。
下面是代码片段，以防您不想查看jsFiddle。
浏览 0提问于2018-02-08得票数 1
回答已采纳
1回答
将SVG蒙版剪切成图像
、、、、
我正在开发的一个新网站出了点问题。这是我第一次使用SVG，基本上我需要在我的图像中切出一个始终居中的圆圈，以显示元素下的图像。我试着使用我的剪辑，一切都很棒。我似乎找不到我的掩码代码中的错误。这是我设置的快速小提琴的。谢谢!
<div class="bg-gradient">
<img src="http://www.redhdwallpapers.com/wp-content/uploads/2014/05/red-background-6.jpg"/>
</div>
<svg version="
浏览 4提问于2014-08-22得票数 0
当在绿色圆圈上触发"mouseenter“事件时，控制台中打印出1，在蓝色圆圈上触发时，控制台中打印出2。请注意，当鼠标进入绿色圆圈时，1将精确打印一次。当鼠标进入蓝色圆圈时，圆圈内的任何鼠标移动都会导致2被打印出来。
var gr = document.getElementById("greenOne");
var bl = document.getElementById("blueOneCopy");
gr.onmouseenter = function() {gr.parentNode.appen
浏览 9提问于2021-05-15得票数 1
回答已采纳
1回答
多元素SVG Hover状态
、、、、
大家下午好，
我正在用下面的defs在我的页面上定义一个SVG。
<svg width="0" height="0">
<defs>
<g id="stroke-hexagon">
<polygon fill="#002663" stroke="#FFFFFF" stroke-width="6" stroke-miterlimit="12" points="57.8,185 5.8,95
浏览 1提问于2015-05-21得票数 2
回答已采纳
我有以下HTML代码：
<!DOCTYPE html>
...
<div id="body">
<svg version="1.1" ...>
<defs>
<svg id="svgelid" width="24" height="24" x="0" y="0" version="1.1">
<rect x="0&#
浏览 3提问于2014-08-20得票数 3
1回答
我动画悬停一个蒙版SVG的不透明度，把一个半透明的层放在一个图像上。除了Firefox之外，它都运行得很好，在Firefox中，面具不显示，图像变白。通过CSS将蒙版应用于图像
<svg id="svg-fade" class="visible-sm-block img-circle" width="200" height="200">
<defs>
<mask id="mask2" width="200" h
浏览 0提问于2015-08-27得票数 0
1回答
我正在尝试使用SVG创建一个固定的剪辑掩码。这个掩码必须有position: fixed，因为我希望它与浏览器一起滚动。
我有以下HTML/SVG和SCSS：
<div class="table"></div>
<div class="clipping-mask">
<svg>
<defs>
<clipPath id="clipping">
<circle cx="50%"
浏览 0提问于2015-03-02得票数 1
我编写了以下jquery脚本。
<script type="text/javascript">
$(document).ready(function(){
$('#Oval-1').on('mouseover', function(e) {
$("#Oval-1").fadeOut();
});
$('#Oval-1').on('mouseout', func
浏览 0提问于2016-12-06得票数 0
回答已采纳
2回答
只通过svg掩码中的孔单击
、、、、
我有svg面具，它可以确定矩形的洞。在svg掩码后面，我有一些可点击的元素，我希望将事件传递给它们，但只通过洞。我已经尝试过pointer-events值，但是我只能制作整个掩码来传递事件，或者用整个掩码来捕获它们。对于一个洞，它可以简单地使用剪辑路径，只是确定洞的外部部分，但几个洞使事情变得更加困难。是否有可能避免使用剪辑路径？我也尝试过pointer-events: visiblePainted和pointer-events: painted，但没有成功。
.background {
width: 400px;
height: 400px;
background: red;
浏览 5提问于2020-07-20得票数 4
回答已采纳
我有一个SVG，里面有两个图像。每个图像都被蒙住了。我的图片1在顶部和下面的图像2。如果没有蒙面，则图像2到达图像1蒙面区域的下半部，就像您在上看到的那样。
然后，我附加了一个点击侦听器到这两个图像。
我的问题是，当它们都被屏蔽时，如果我确实点击了图像1的下半部，那么图像2的单击事件就会被触发。我认为这是因为如果图像不是蒙面的，那么图像2的一部分也会重叠到图像1的下半部，但我不明白为什么它们都会在发生这种情况时被蒙住。
在这里，我给您留下一个JSFiddle和一个。我希望它能帮助你更好地了解正在发生的事情。
<div style="display:inline-block;wi
浏览 3提问于2016-10-12得票数 0
回答已采纳
我想在鼠标上的svg linearGradient上创建一个平滑的反向动画。这是否可能仅限于内联代码(没有js或css)？
我已经尝试了以下的代码，但在第一个鼠标上方动画完成后，它会返回到框架1，这破坏了平滑鼠标输出效果。
在鼠标退出时，我想平稳地逆转linearGradient。
<svg viewBox="0 0 360 160" width="360" height="160" id="ani">
<defs>
<linearGradient id="lightGradient"
浏览 0提问于2019-08-27得票数 0
回答已采纳
1回答
我正在用D3.JS创建一些SVG，我有一组SVG元素，我对数据集中的每一项重复这些元素。重复的元素之一是一个方形的化身/轮廓图像。我想掩盖每一个这些图像，使它们圆润。
我认为在defs中定义一个掩码，然后将每一个图像指向它都是可行的，但这并不是因为它们的坐标是不同的。这是否意味着我需要在每个组中重复掩码，如下所示：
<defs>
<mask id="#mask" ...>
<!-- ... --->
</mask>
</defs>
<g>
<rect ...
浏览 3提问于2013-10-11得票数 2
回答已采纳
1回答
在本例中：
为什么将条形路径颜色更改为白色以外的颜色会破坏呈现？如何能够改变路径颜色？
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<style>
#stripe path {
stroke: #fff;
stroke-width: 2px;
}
.stripe {
mask: url("#mask");
}
.blue.stripe {
fi
浏览 1提问于2017-05-24得票数 1
回答已采纳
使用SVG pattern**:** 初始图
<svg width="200" height="200" viewBox="0 0 100 100">
<defs>
<pattern id="img-dotted-dots" x="0" y="0" height=".08" width="7.69%">
<circle cx="2" cy="2" fill="
浏览 1提问于2020-03-17得票数 2
回答已采纳
2回答
我正在做一个codewar链接(一个div)。我希望div中的svg在悬停时连续旋转。由此产生的悬停效果远不是平滑的，当鼠标滚动到svg上时，svg会跳跃。mouseout事件被注释掉了，因为它使它更有价值。优化这一点的最佳方法是什么？Codepen：
CSS：
#codewars-butn{
position: absolute;
top: 20%;
left: 20%;
background-color: #B21C15;
border: 2px solid;
border-radius: 10px;
}
body{
background-color: #3F2
浏览 2提问于2017-11-15得票数 1
我试图使用text过滤器对feFlood元素中的一个单词应用背景色。
然而，所发生的是洪水正在填充所有的父元素，甚至隐藏了一些文本。
DEFS
<filter x="0" y="0" width="1" height="1" id="colorMe">
<feFlood flood-color="red"/>
<feComposite in="SourceGraphic"/>
</filter>
风格
.colorMe
浏览 6提问于2016-04-13得票数 1
我正在浏览用于在SVG中裁剪和掩蔽的MDN文档，并遇到了以下SVG：
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="Gradient">
浏览 1提问于2018-05-11得票数 0
回答已采纳
<!DOCTYPE HTML>
<html lang="ru">
<head>
<title></title>
</head>
<style>
svg{
overflow:hidden;
}
defs:hover{
transform:scale(1.2);
}
</style>
<body style="background:url(http://namonitore.ru/uploads/catalog/znamenitost
浏览 0提问于2016-06-12得票数 0
1回答
动态SVG元素没有正确地使用掩码
、、、、
我正在使用SVG舱口面罩作为我的定制，内联创建SVG，这是小提琴
但我可以让它动态地工作，而火狐的渲染方式似乎与chrome不同？我查看了生成的代码，但我只知道存在url()函数问题。
中间列只有在从静态创建的掩码id中获取url时才正确地生成。
<svg width="0" height="0">
<defs>
<pattern height="3" width="3" patternUnits="userSpaceOnUse" id="stripe
浏览 4提问于2014-12-14得票数 0
回答已采纳
6回答
我有两种形状:圆形和长方形。想把它们转换成一个数字。在SVG代码中有什么方法可以做到吗？
<svg width="400" height="400">
<defs>
<g id="shape" fill="none" stroke="red">
<rect x="40" y="50" width="40" height="70" />
<circle
浏览 10提问于2016-08-28得票数 19
回答已采纳
1回答
当我试图使svg成为悬停图像的光标时，我遇到了麻烦。示例如下：
<div class="main">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
<svg class="arrowWrapper" version="1.1" xmlns="http://www.w3.org/200
浏览 27提问于2020-02-12得票数 1
1回答
伪装一个SVGPattern是可能的吗？
我已经做了下面的SVG，但我不能让面具工作。还是应该使用clipPath？
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="160px" height="600px" view
浏览 1提问于2013-09-05得票数 0
回答已采纳
1回答
我在网上找到了一个SVG层。应该有一个透明的洞。但我不知道如何把洞周围的颜色从黑色改为#5BBB74。
<svg viewbox="0 0 100 50" width="100%">
<defs>
<mask id="mask" x="0" y="0" width="80" height="30">
<rect x="0" y="0" width="100" heig
浏览 4提问于2021-12-22得票数 0
1回答
我使用SVG作为图像蒙版，但我不知道如何在调整页面大小时使SVG改变其大小。当我改变窗口大小时，SVG内部的图像会调整大小，但SVG不会。
这是SVG代码：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="L
浏览 0提问于2014-03-23得票数 2
我想给svg图像分配一个svg掩码。我可以用面具上的id来做这个工作，就像这样：
<svg id="svg1" width="5cm" height="5cm" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<mask id="mask">
<circle cx="10
浏览 2提问于2017-12-03得票数 5
回答已采纳
我已经很容易地用PNG (黑色圆圈，透明背景)做了一个蒙版，并在chrome等浏览器上使用了-webkit-mask-image:url(images/mask.png)。但是我在使用SVG在Firefox中显示面具时遇到了严重的问题
<svg>
<defs>
<mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<image width="78px
浏览 0提问于2013-05-01得票数 0
我正在用IE11.0.9600.17280测试这个。如果在将鼠标移动到SVG区域时更改文本框，Internet Explorer将停止对整个页面的鼠标事件(单击、移动)作出响应，但仍然可以使用键盘(键入、左右选项卡)。我找到的获得鼠标控制的唯一方法是刷新页面。有时，即使鼠标不动，它也会发生。
是什么引起的？有办法解决这个问题吗？
var pt;
$(document).ready(function(){
pt = document.getElementById("layout_area").createSVGPoint();
$("#layout
浏览 0提问于2014-10-14得票数 5
回答已采纳
1回答
我在Ubuntu 15.10上使用Chrome 49.0.2623.87 (64位)。火狐也不起作用。
我使用svg.js编写了以下代码：
function blockmouseenterHandler(){
console.debug('mouseenter')
var mask = anatomy.frame.rect(100,100).move(0,0).addClass('hovermask').fill({ color: '#000'});
this.maskWith(mask);
}
它创建的掩码/防御：
&l
浏览 0提问于2016-03-23得票数 0
回答已采纳
考虑以下SVG图像代码：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<title>Clipped Path Problem Demo</title>
<g id="group:image">
<defs>
<mask id="mask">
<rect id="rectang
浏览 2提问于2017-11-16得票数 3
回答已采纳
2回答
我的目标是在html5中使用svg掩码剪出照片的矩形区域。我尝试使用下面的代码和这个中的代码来实现这一点，但没有效果。有人能告诉我我做错了什么吗？
html：
<body>
<svg id="svg-rect" width="50px" height="50px">
<defs>
<mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox
浏览 1提问于2014-03-18得票数 0
回答已采纳
1回答
我在一个foreignObject标签中有一个div，当我将鼠标悬停在它上面时，我想要将它的颜色更改为与六边形的填充颜色相同的颜色。对于六边形来说，鼠标悬停效果很好，但是当你将鼠标悬停在div上时，什么也不会发生。有什么想法吗？
.hex {
stroke: red;
stroke-width: 1px;
fill: transparent;
}
.hex:hover {
fill: blue;
}
#div1 {
border: 1px solid green;
text-align: center;
}
#div1:hover {
fi
浏览 0提问于2018-09-07得票数 0
我正在尝试制作一个SVG动画与直线和圆。线应该是动画的，圆应该相对于线的高度移动。这条线应该在div的底部开始，动画之后，它应该实现与圆圈的div广告的顶部，然后应该动画到底部，再次从下到顶，从上到下所有的时间只有一个例外-如果用户悬停在圆圈上，如果用户鼠标悬停在圆圈上，它应该在停止时开始。 div {
height: 100px;
} <div>
<svg xmlns="http://www.w3.org/2000/svg" width="171" height="728" viewBox="0 0 171
浏览 45提问于2020-12-15得票数 0
1回答
无法动态操作面的坐标
、、、、
我想让图像显示为六边形。因此，我使用的是svg。
<svg id="hexagon">
<defs>
<pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox">
<image height="1" width="1" preserveAspectRatio="
浏览 0提问于2016-06-12得票数 1
1回答
我想应用带有转换的SVG过滤器。我希望当鼠标在它上时应用它，当鼠标离开它时丢弃它。我试过这段代码但没成功。我怎么能这么做？
var rect = document.querySelector("rect")
var use = document.querySelector("#fs")
rect.addEventListener("mouseover", () => {
rect.setAttribute("filter","url(#filter)")
use.setAttribute(
浏览 4提问于2021-08-18得票数 0
回答已采纳
1回答
我有一个SVG的文本和一个面具(动画面具稍后)，我想有一个填充白色。但是，当我将填充设置为白色时，文本就会丢失，就好像颜色是透明的一样。这是相关代码..。
svg {
margin: 0;
color: rgba(255, 255, 255, 1);
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
}
rect {
-webkit-mask: url(#mask);
mask: url(#mask);
fill: #f00;
}
defs {
mask {
浏览 3提问于2020-05-06得票数 0
回答已采纳
1回答
为什么不使用第一个掩码图像？
<svg width='200' height='200' baseProfile='full' version='1.2'>
<defs>
<mask id='svg_mask' maskUnits='userSpaceOnUse' maskContentUnits='userSpaceOnUse' transform='scale(1)'>
<image widt
浏览 1提问于2016-09-28得票数 0
2回答
我有一个关于画布和SVG的基本问题。我想要创建一个覆盖与洞，并填补它的一些颜色。它似乎使用画布工作，但我想尝试SVG (处理事件，例如调整大小)。
canvas.width = 200;
canvas.height = 200;
var context = canvas.getContext('2d');
//fill background
context.globalAlpha = 0.8;
context.fillStyle = "blue"
context.fillRect(0, 0, 200, 200);
context.globalCo
浏览 0提问于2018-10-31得票数 1
回答已采纳
我正试着做一个水滴svg，它可以显示水箱中的水的水平。我这样做的线性梯度，所以我可以显示图形(和容易)，如果水是一半或满，等等。在这个例子中，我显示坦克是半满。我想给水滴增加一个三维的影响，并找到一种方法，用径向梯度，但不能想出一种方法，同时加载两个梯度到相同的svg图像，如果这是不可能的，有人有一个想法，他们将如何做下面呢？我不想点击这里在我的例子，它只是显示的三维外观，我试图添加到半满液滴。
在加载页面时，是否可以在单个svg图像上同时使用两个梯度？
<!DOCTYPE html>
<html>
<head>
<style>
浏览 2提问于2021-09-08得票数 0
回答已采纳
我有个复杂的问题。我试图通过svg呈现一个网格，然后将事件侦听器添加到网格中。目前，我正在通过<pattern>元素呈现网格。我对呈现网格的其他途径是开放的，但它需要具有可伸缩性/可执行性，因为这个网格可以很容易地呈现成成千上万个正方形。把它想象成一幅平面图或蓝图。
我想要的：，我希望能够将一个事件侦听器附加到中的每个网格中。
我所做的:我查找了svg文档，尝试了一系列不同的东西(比如onclick处理程序，svg属性，比如指针事件.(等等)但没有运气。我也许可以让它与鼠标客户端坐标一起工作，但是如果可能的话，我想避免使用这种方法，因为这个svg将具有缩放和pan功能。这会使坐标转
浏览 2提问于2018-08-11得票数 2
1回答
我正在尝试创建一个面具的视频标签。
我有下面的svg元素，它有透明的文本，但我希望有一个矩形的形状，而不是文本。
我也尝试过用多边形来创建一个矩形，但它似乎不起作用。
<polygon points="0 0,0 100,300 100,300 0" fill="orange" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80" preserveAspectRatio="xMidYMid slice">
浏览 1提问于2022-07-29得票数 -3
回答已采纳
1回答
我试图制作一个SVG图标，使用SMIL动画(嗯，我不在乎它是SMIL还是CSS，我只是不想使用JS)，我已经走了很远，但我遇到了一个问题，我没有找到答案，甚至在网上提到。动画从鼠标悬停(鼠标悬停)开始，但在鼠标操作时，动画元素之一(第二圈)保持动画，我完全不知道为什么。
你也可以在上看到它
谢谢你能提前提供的任何帮助。
svg { width: 100px; color: red; }
<svg id="location" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
浏览 1提问于2018-05-03得票数 2
回答已采纳
1回答
我想在SVG中动画(为了简化，假设是Scale+)一个文本蒙版(它必须是一个蒙版)。我正在使用GSAP来实现这一点。
我的动画在Edge和Chrome上播放得很好，但在Firefox上就不行了。
var tl = new gsap.timeline();
tl.add(
gsap.to("#masktext", 3, {scale: 3, "text-anchor": "middle", transformOrigin: "50% 50%"}),
"0"
);
.svg-contai
浏览 2提问于2020-04-08得票数 1
1回答
我正在使用clipPath对页面上的图像应用不同的“掩蔽”效果。
每个图像都会有一个可变长度的标题。将鼠标悬停在图像上时，我希望在图像顶部显示标题，而在鼠标输出时，我希望隐藏标题。因为标题长度不同，所以我需要适当地对文本进行换行，这样文本就不会超出图像。
我尝试过使用foreignObject和textArea，但我似乎无法让悬停效果正常工作。
我还尝试使用普通超文本标记(特别是段落标记)和绝对定位+ z-index来定位文本，但是文本大小没有相应地随图像的大小缩放(因为它不是SVG的一部分)。
我在这个项目中使用jQuery，所以如果需要JS解决方案，可以使用jQuery。
下面是我正在使用
浏览 0提问于2012-12-13得票数 4
回答已采纳
1回答
我有一个非常基本的SVG，它有一条垂直线穿过4个圆圈。我对垂直线的掩码定义与直线本身相同，唯一的区别是笔画颜色(在本例中为#fff)，因为我希望能够看穿掩码。但是，由于未知的原因，面具的作用仍然好像颜色是黑色的，因此隐藏了元素。如果有人知道为什么会这样，请告诉我。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<defs>
<mask id="education">
浏览 2提问于2016-11-05得票数 4
回答已采纳
1回答
响应式SVG掩码
、、
我在Stack上看过其他几个答案：
但似乎没有一个对我有效。我有一个基于路径的SVG掩码。我想要它扩展以填充所有可用的空间(或收缩)，同时保持路径的纵横比。
svg {
width: 100%;
height: 100%;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0
浏览 16提问于2019-11-18得票数 1
回答已采纳
1回答
我有一个具有整个页面宽度/高度的SVG，因此SVG和SVG中的多边形会根据窗口改变形状和大小，这是通过将SVG元素上的preserveAspectRatio设置为"none“来实现的。多边形有一个背景图像，应该保持它们的纵横比，因为我将preserveAspectRatio设置为"xMinYMin slice“。但遗憾的是，SVG元素上的preserveAspectRatio似乎引起了冲突，现在当我改变窗口大小时，背景图像会改变纵横比。我想要的基本上是相当于"background-size: cover“的SVG。
<!DOCTYPE html>
<h
浏览 0提问于2014-11-01得票数 3
2回答
如何从js中动画化掩码svg？
、、、、
如何使用js掩码动画，并屏蔽层和层掩码svg？而不使用第三方图书馆？
<svg id="mask-layer" width="200" height="50" >
<defs>
<mask id="mask">
<rect width="200" height="50" style="fill: red" />
</mask>
</defs>
浏览 4提问于2015-10-17得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
