svg 相关问题

可缩放矢量图形（SVG）是一种基于XML的二维矢量图形格式，也可以在HTML中使用。不要仅仅因为您的项目使用SVG而添加此标记。相反，如果您的问题是关于SVG或与其密切相关的问题，请添加标记，例如如何使用SVG实现某些功能。

我在 SVG 教程中找到了这个示例，它解释了如何对 SVG 元素使用 onclick 事件处理程序。它看起来像下面的代码：我在 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() 带入页面的。这可能有什么关系吗？非常感谢您的帮助。看来所有 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> JSFiddle 中的演示 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; } 如果您不需要单击 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'); }); 向 svg 节点添加事件监听器： svgobj.addEventListener("click", myFunction); 确保将 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> 我建议为 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 图上的状态更改为 Printed 选项， - 单击其中一个元素，然后在控制台中检查输出。我遇到了同样的问题，关于将 z-index 放置在 div 顶部的答案有帮助！但是，我发现您不需要将 svg 包装在 div 中，只要父级已定位，您就可以将其 z 索引到顶部。将 onlClick 处理程序移出 svg 并将事件添加到 svg 本身。您可能会间歇性地在事件处理程序中获取 rect 而不是 svg，在这种情况下您可以这样做： if (event.target.tagName !== 'svg') { event.target = event.target.closest('svg'); } 所以重构你的代码： <script type="text/ecmascript"><![CDATA[ function changerect(evt) { if (evt.target.tagName !== 'svg') { evt.target = event.target.closest('svg'); } var svgobj = evt.target; svgstyle = svgobj.getStyle(); svgstyle.setProperty ('opacity', 0.3); svgobj.setAttribute ('x', 300); } ]]> </script> <svg onclick='changerect(evt)' xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'> <rect style='fill:blue;opacity:1' x='10' y='30' width='100' height='100' /> </svg> 我们可以简单地向 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; }

html ajax dom svg

回答 9 投票 0

从 Inkscape 导出的 SVG 使用不同的字体渲染

我已使用 Inkscape 打开 PDF 并将其导出为纯 SVG。但是，当我在任何浏览器中打开它时，文本会以不同的字体呈现。

svg inkscape

回答 1 投票 0

缩放旋转的SVG元素

问题我尝试创建一个小插件，通过在每个现有矩形和圆形的右上角拖动一个小矩形来缩放 SVGelements。虽然这对于红色元素效果很好，但它......

javascript svg

回答 1 投票 0

如何使用 SVG 路径屏蔽 DIV

我尝试创建一个 HTML/CSS/JS 漏斗图，具有简单的前端结构，为此，我将漏斗段放置为弹性行： document.addEventListener( 'DOMContentLoaded', function(...