svg 相关问题

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

SVG 图标不可见

我不知道下面的 SVG 代码可能有什么问题。在浏览器中是不显示的，但是直接显示的话很好看。如果我用任何其他 SVG 替换 CSS 中的它们，它们......

css svg

回答 1 投票 0

我无法让引导图标在文本旁边垂直居中

我无法将引导星形图标置于我正在设计的网站中评论文本旁边的中心。我将 svgs 嵌入到我的代码中。我在这里也使用一些 Bootstrap 4 类作为上下文。方法如下

html css svg bootstrap-4 vertical-alignment

回答 1 投票 0

可以使用 SVG 滤镜对图像进行像素化吗？

注意：我不能使用 JavaScript，因为这是针对 CSS Zen Garden 的挑战。请不要推荐 JS 库。我有两个想法没有取得进展：使用 SVG 滤镜来

css svg svg-filters

回答 3 投票 0

悬停时更改 div 内的两个对象

我有一个按钮，其中有一个 svg 图像（在 css 中定义）和一些文本。我试图在按钮的悬停和活动状态下更改文本和 svg 的颜色，但到目前为止我只是

html css svg

回答 1 投票 0

向 SVG 元素添加 onclick 事件

我在 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(...