我在SVG教程中找到了这个例子,它解释了如何为svg元素使用onclick事件处理程序。它看起来像下面的代码:
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'>
<script type="text/ecmascript"><![CDATA[
function changerect(evt)
{
var svgobj=evt.target;
svgstyle = svgobj.getStyle();
svgstyle.setProperty ('opacity', 0.3);
svgobj.setAttribute ('x', 300);
}
]]>
</script>
<rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'
height='100' />
</svg>
然而,这似乎不起作用。点击元素时没有任何反应。
或许重要的是要提到我使用echo在php脚本中显示svg的事实。 此外,php脚本生成的内容使用AJAX和
进入页面 XMLHttpRequest()
这可能与它有什么关系吗?非常感谢您的帮助。
答案 0 :(得分:18)
似乎所有的javascript都必须包含在svg中才能运行。我无法引用任何外部函数或库。这意味着您的代码会在svgstyle = svgobj.getStyle();
这将做你正在尝试的事情。
<?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 xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'>
<script type="text/ecmascript"><![CDATA[
function changerect(evt) {
var svgobj=evt.target;
svgobj.style.opacity= 0.3;
svgobj.setAttribute ('x', 300);
}
]]>
</script>
<rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'height='100' />
</svg>
答案 1 :(得分:5)
var XMAX = 500;
var YMAX = 500;
var _xx=10;
var _reg=100;
var _l=10;
// Create PATH element
for(var x=1;x<20;x++)
{
var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
pathEl.setAttribute('d','M'+_l+' 100 Q 100 300 '+_l+' 500' );
pathEl.style.stroke = 'rgb('+(_reg)+',0,0)';
pathEl.style.strokeWidth = '5';
pathEl.style.fill = 'none';
$(pathEl).mousemove(function(evt){$(this).css({"strokeWidth":"3","stroke":"#ff7200"}).hide(100).show(500).css({"stroke":"#51c000"})});
$('#mySvg').append(pathEl);
_l+=50;
}
答案 2 :(得分:0)
确保将className/id
添加到<use>
;或者,如果您在SVG脚本范围之外进行检测,也可以使用实际的SVG路径/元素:
<svg rel='-1' class='**ux-year-prev**' width="15px" height="15px" style="border:0px solid"><use class='**ux-year-prev**' xlink:href="#svg-arrow-left"></use></svg>
答案 3 :(得分:0)
如果您不需要单击svg的特定部分,这可能是一个可能的解决方案:
将div放在顶部并向该div添加事件。如果svg元素位于html结构中的div标记之前,则不需要z-index。
HTML
<div class='parent'>
<div class='parent-events'></div>
<div class='my-svg'><svg></svg></div>
</div>
CSS
.parent {
position: relative;
}
.my-svg {
position: relative;
z-index: 0;
}
.parent-events {
position: absolute;
width: 100%;
height: 100%;
z-index: 1
}
的Javascript
const eventArea = document.querySelector('.parent-events');
eventArea.addEventListeners('click', () => {
console.log('clicked');
});
答案 4 :(得分:0)
我建议使用svg元素的onclick
事件处理程序的这种方法:
var svgobj = parent_svg.find('svg')[0].children;
for (i = 0; i < svgobj.length; i++) {
element = svgobj[i];
element.style = "cursor: pointer;";
$(element).click(function(evt){console.log($(this))});
}
首先查看svgobj
在获取console.log
事件处理程序时是否传递给onclick
。从那时起,您可以传递给处理元素的任何函数。
您可以在此处查看示例的工作原理:
https://jsfiddle.net/chetabahana/f7ejxhnk/20/
关于如何使用此样本的说明:
- 将SVG图表上的状态更改为已打印选项,
- 单击其中一个元素,然后在控制台中输出输出。
答案 5 :(得分:0)
将事件监听器添加到svg节点:
let svgobj.addEventListener("click", myFunction);
答案 6 :(得分:0)
我遇到了同样的问题,关于将 z-index 放在 div 顶部的答案有帮助!
但是,我发现您不需要将 svg 包装在 div 中,只要定位父项,您就可以将其 z-index 到顶部。
答案 7 :(得分:0)
我们可以简单地向 svg 添加一个 onclick 事件
<img class="video-svg" id="play" onclick="playVid(id)" src="assets/img/logo/play svg.png">
然后我们可以提供 css 来产生效果,为此我们需要将位置设置为绝对值,将 z-index 设置为 200,这将使 svg 的点击事件发生
2.
.video-svg {
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 7%;
background: no-repeat;
border: none;
z-index: 200 !important;
width: 10% !important;
position: absolute !important;
}