草庐IT

mermaid-svg-Rc

全部标签

javascript - 如何调整大 svg 的大小以适应 div

我在中有以下div.我想在这个div中放置一个640X480的svg。我试过这个:varpaper=Snap("#svg1");Snap.load("somesvg.svg",function(f){paper.append(f);});paper.attr({width:320,height:480})但是svg被从正确的尺寸chop了。 最佳答案 我想知道是否为此调整viewBox,所以像...jsfiddlehttp://jsfiddle.net/9zRR8/5/ 关于javasc

html - CSS - 悬停时更改填充颜色 - SVG 路径

我在我的元素中使用svg路径使用现代ui图标包。我尝试做的是更改悬停时的填充颜色。但是我没有成功..希望有人能帮我解决这个问题。提前致谢。代码: 最佳答案 您可以像下面这样通过css覆盖svg填充颜色,也可以针对不同的元素,例如polygoncircle等#Mainsvg:hover{fill:#fce57e;}#Mainsvg:hoverpath{fill:#fce57e;}#Mainsvg:hoverplygon{fill:#fce57e;}#Mainsvg:hovercircle{fill:#fce57e;}

html - 在 IE10 中移动线条时,SVG 线条标记不会更新?

我有一些带有线标记的SVG线条,我有一个脚本可以移动这些线条。这适用于所有浏览器,包括IE9。但是,我刚在IE10上试过,线移动时线标记会留在后面。可以在这里看到一个例子:http://jsfiddle.net/swYRK/8/我在Windows7和8上都试过这个。有人知道这是怎么回事吗?这是IE10错误,还是有其他方法可以移动线条和标记?(请注意,实际应用程序对性能非常敏感,因此我非常想避免在移动线条时每帧重新创建线条之类的事情。)-编辑:这似乎是一个真正的IE10错误。我找到了一个openissueintheIEbugtracker(这甚至需要一个Microsoft帐户才能看到,这

html - 光标 : pointer; on svg element is not working

在我的网站中,我使用svg元素。有时我需要它们是可点击的,因此我希望指针光标位于它们之上。但是添加CSS类或样式cursor:pointer;不工作。这是示例元素它似乎不适用于svg。有人知道如何修复或绕过它吗? 最佳答案 正如AmeliaBR的评论所示,您应该在SVG中添加此样式.除非您的SVG非常简单,否则您可能会遇到与我相同的问题:只有当您将鼠标悬停在SVG中的一个形状上时才能看到指针,但当您在形状之间时则看不到。(在某些情况下,您可能需要这种行为,但对于文字商标,例如,您通常希望整个矩形都是可点击的,而不仅仅是单个字母。)要

html - Firefox SVG 图形模糊

我有一个带有SVGLogo/图像的响应式网页设计,它与其容器是动态的。所有主流浏览器似乎都很好地支持SVG。我的SVG是动态的,所以如果我放大我的浏览器窗口,SVG也会这样做。在Chrome和IE9中,它就像一个魅力。在Firefox中,SVG在某些尺寸下是模糊的。但我不能说它在超过初始SVG大小时总是模糊的。当我放大我的浏览器窗口时,它似乎并没有一直正确地重新呈现。这就是它有时看起来的样子(在fullsize中查看它以了解不同之处):也许我使用了错误的方式来嵌入它。这就是我的CSS和HTML的样子:CSS:#logo{background-image:url('http://dl.d

css - svg css 圆 Angular 不起作用

我有一个要应用CSS的SVG文件。大多数规则似乎都有效,但是当我应用有关圆Angular的规则(rx:5;ry:5)时,它没有任何效果。“内联”样式规则有效,但我对嵌入式和外部样式表不满意:知道我哪里出错了吗? 最佳答案 rx和ry是常规属性而不是表示属性。CSS只能设置表示属性的样式。列出了各种常规/演示属性here另见PresentationAttribute和Property来自SVG1.1规范。即将推出的SVG2规范建议将大多数表示属性变为CSS属性。到目前为止,Chrome和Firefox已经实现了规范草案的这一部分。我想

javascript - SVG 无法正确呈现为主干 View

我正在使用d3.js以svg格式渲染世界地图(使用https://github.com/johan/world.geo.json/blob/master/countries.geo.json作为功能)。我将渲染逻辑封装在主干View中。当我呈现View并将其附加到DOM时,我的浏览器中没有显示任何内容,尽管在查看生成的HTML时正确生成了SVG标记。当不封装在Backbone.View中时,这会很好地呈现。这是我使用Backbone.view的代码:/***SVGMapview*/varMapView=Backbone.View.extend({tagName:'svg',transl

html - CSS 翻译在 SVG g 上的 IE11 中不起作用

我想使用移动一组svg元素标记,但它不能在IE中工作,即使是最新版本,尽管它可以在所有其他浏览器中工作。我是否需要使用其他方式来移动svg中的一组元素?svg{width:20px;height:20px;}g{transform:translate(10px,0);-ms-transform:translate(10px,0);} 最佳答案 IE11支持SVG中的transform属性,即使它不识别CSS样式。幸运的是,您可以使用JavaScript简单地设置属性以匹配样式:varg=document.querySelector(

javascript - 已弃用的 SVG pathSegList 的替代方案

我正在编写一个扩展折线功能的Leaflet插件。在我的插件中,我使用SVGPathSegList接口(interface)访问路径段。但根据ChromeDevTools,该接口(interface)将在Chrome48中删除。我正在寻找另一种访问路径段的可能性。Here's我的fiddle。(function(){var__onAdd=L.Polyline.prototype.onAdd,__onRemove=L.Polyline.prototype.onRemove,__updatePath=L.Polyline.prototype._updatePath,__bringToFron

html - 在 HTML 中放置 SVG 内容的最佳方式

根据我的研究,我了解到可以通过三种方式将svg文件放入HTML中:使用嵌入:使用对象:使用iframe:我已经在测试平台(django内置开发服务器,在Firefox3.6中呈现页面)上对所有三个进行了试验。在这种明显无菌的环境下,我没有注意到这三者之间的任何区别--w/r/t性能或分辨率。我的问题是其中一个是否比其他两个更好,如果是,哪个更好。答案当然可能取决于事实,我试图将其限制在相关的范围内:我们经常在我们的网站上显示数据(例如时间序列),这些数据通常是为了响应某些用户操作而创建的;基于该用户操作,对数据库进行调用,返回的数据被处理并发送到绘图引擎,绘图引擎呈现静态图像,然后将其