我有一个SVG导航盘，我把它放在jsfiddle 上。下面是实际的SVG代码：我想要的是能够悬停在导航轮的每个部分，并有颜色反转，换句话说，图标将填充背景颜色和背景将填充#fff。我看了一个视频，
浏览 6提问于2017-01-17得票数 0
回答已采纳
2回答
创建一个不消耗单击事件的悬停区域
、、、、
我想在一个元素上悬停时显示一个工具提示框，并且我只希望工具提示在用户的鼠标退出自定义的悬停区域时消失，就像矢量图形所定义的那样。除了悬停区域阻止单击从冒泡到工具提示的事件外，这是可行的，如下所示。 width: 90px; x: 0;}
<defs>
浏览 5提问于2017-03-27得票数 0
回答已采纳
我试图在悬停状态下从三角形到正方形的剪辑路径动画转换，但我似乎就是不能正确地工作。 <polygon points="0,0 75,75 150,150 0,150" />
浏览 2提问于2014-08-19得票数 1
2回答
我正在使用clipPath对图像应用不同的“掩蔽”效果。<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
浏览 1提问于2012-12-12得票数 2
回答已采纳
我正在创建一个clipPath元素来添加到svg中。var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var clipElement = document.createElementNS('http://www.w3.org/2000/svg',
浏览 0提问于2014-03-12得票数 1
1回答
我正在使用clipPath对页面上的图像应用不同的“掩蔽”效果。
每个图像都会有一个可变长度的标题。将鼠标悬停在图像上时，我希望在图像顶部显示标题，而在鼠标输出时，我希望隐藏标题。我尝试过使用foreignObject和textArea，但我似乎无法让悬停效果正常工作。我还尝试使用普通超文本标记(特别是段落标记)和绝对定位+ z-index来定位文本，但是文本大小没有相应地随图像的大小缩放(因为它不是SVG的一部分)。</clipPath</em
浏览 0提问于2012-12-13得票数 4
回答已采纳
1回答
我有一个svg路径，我试图使用作为剪辑掩码。当我将svg路径添加到svg元素时，它的大小与我想要剪辑的图像成直线。但是，如果我将相同的路径复制并粘贴到clipPath元素中，则会更改大小。在下面的代码中，您可以看到相同的路径用于绘制svg和clipPath。绘制的路径是正确的大小，但是clipPath更大。<svg id="clip-svg" viewBox="0
浏览 4提问于2017-10-25得票数 0
回答已采纳
1回答
当我试图使svg成为悬停图像的光标时，我遇到了麻烦。class="main"> <div class="image2"></div><svg270.7 166.49" xml:space="pres
浏览 27提问于2020-02-12得票数 1
2回答
我有这段代码，我希望SVG对象在悬停时展开。我找到了一个解决方案，使SVG对象从形状的中心展开，但它没有响应。display: block;}
margin-top: 50px;} <svg> <clipPath id="c1">
浏览 3提问于2017-12-14得票数 1
回答已采纳
我正在使用VivaGraph.js库在SVG中呈现一个图形。我正在尝试显示一个裁剪成圆圈的图像，为此我使用了clipPath元素--正如中所建议的那样。但是，当我创建一个新的带有大写字母的SVG元素时(例如，在我的例子中是clipPath )，插入到DOM中的元素是小写的，即clippath，即使我传递给构造函数的字符串是camelCase。由于SVG区分大小写，因此忽略该元素。其他一切似乎都没问题。
我还试图改变附加子元素的顺序，希
浏览 0提问于2014-08-07得票数 0
回答已采纳
2回答
我尝试在悬停时更改图像的src属性值，并在中心方块中显示悬停的图像。 这就是我想要做的，但是使用SVG：How to change an image source on hover? translate(-50%, 7%); transition: .2s .1s ease-out; opacity: 1;
} <svg<polygon points="0,100 100,
浏览 21提问于2019-06-17得票数 5
回答已采纳
1回答
悬停时移除clipPath
、、、、
简而言之，我有一个用clipPath蒙面的图像，这样它就可以在IE 9+中工作。问题是，我需要有掩蔽隐藏在悬停，以便它显示完整的图像，然后重新应用于鼠标。我现在的剧本不起作用。钢笔包括在下面。我对SVG和clipPath非常陌生。
$('.finish') $(this).find('svg').find(&#x
浏览 0提问于2016-02-05得票数 3
回答已采纳
1回答
我有下面的，在这里，我试图在图像周围画一个圆圈的笔画。我怎么才能把边境线展示出来？class App extends React.Component { return ( <clipPath id='
浏览 0提问于2019-01-29得票数 2
回答已采纳
1回答
新来的SVG。我已经创建了一个SVG形状使用Illustrator，并插入了一个图像标签在刮胡子。在svg标记之后，添加一些html，默认情况下它是隐藏的，用户在svg上徘徊时会显示它。试着在SVG上空盘旋。.svg-parent {} position: relative;
浏览 4提问于2016-09-04得票数 1
为了使我的代码更加枯燥，我希望能够为clipPath使用现有的SVG文件。: absolute; left: -9999px; overflow: hidden;"> <clipPath id="my-clip">> </defs>
<div s
浏览 2提问于2022-11-12得票数 0
1回答
目前，我有一个SVG组件，它有一个边框，在边框内有一个图像。我将这些SVG用作地图组件上的标记，这样当用户将鼠标悬停在特定标记上时，事件就会发生。使用我当前的SVG，只有当我将鼠标悬停在SVG的边框上而不是图像上时，才会发生此事件。不管怎样，我可以将SVG的整个路径和图像作为一个单独的实体。更好参考的CodeSandbox：https://codesandbox.io/s/fu
浏览 23提问于2021-08-29得票数 1
回答已采纳
我们在应用程序中大量使用内联SVG。最近，我发现了一些不想要的行为(尤其是在Firefox中，但我在Chrome中也看到了类似的问题)，不同svg的样式可能会相互干扰。在铬，你会看到一个圆形德国国旗(这是正确的)。在Firefox中，您将看到一个方形德国国旗(这是不正确的)。为什么svg的第一次出现时显示为none使第二次出现显示不正确？我认为我可以通过在两个svg中使用不同的id来解决这个问题，但是由于我想从一个包
浏览 1提问于2016-12-14得票数 4
回答已采纳
我有一个带有内联svg clipPath的svg对象。每一件事似乎都在一定程度上兼容于每一种现代浏览器。我只是有一个问题，在WebKit浏览器，如Safari或谷歌浏览器。内联SVG剪辑路径： <defs>
<clipPath id="clippath" clipPathUnits="objectBoundingBox">div ...>
浏览 1提问于2016-05-26得票数 0
1回答
我使用scrollmagic在你滚动的时候在svg剪辑路径之间进行补间。通常使用svgs(或div或sections等)时，您在html中指定的最后一项内容在z索引方面位于顶部，但您可以在css中对其进行更改。我试着用我的svg做到这一点，这样当第一个svg补间时，另一个svg在后面滚动。似乎scrollmagic阻止了我的z索引的工作。有什么想法吗？/800/500" x="
浏览 1提问于2015-12-04得票数 1
1回答
从SVG三角形剪辑到圆的平滑过渡
、、、、
我使用SVG将图像剪切到三角形的路径。我的目标是让路径扩展并成为悬停时的圆(平滑过渡)。<div class="col-sm-4">
<div class=</cli
浏览 2提问于2015-02-03得票数 1
云服务器
ICP备案
腾讯会议
云直播
对象存储
腾讯云开发者
