草庐IT

mermaid-svg-u

全部标签

javascript - 在运行时向我的文档添加更多 svg 元素

我有一个html文件,我正在向它动态添加一个元素,然后是一个矩形。在不同的浏览器中运行良好(忽略IE)。当我尝试使用相同的方法动态创建元素时,它在Chrome或Safari中不起作用,只能在Opera中起作用。是我的语法错误,还是webkit可能只是不支持在运行时添加元素?(如果我预先将其声明为标签,则相同的元素可以正常工作)。也许我不应该对这些类型的节点使用appendChild()?这就是我所拥有的,您应该能够将它转储到一个html文件中并运行它。如果有人知道是否有办法解决这个问题,那就太好了:window.onload=function(){varsvg=document.cre

javascript - 如何使SVG图像图案填充随对象移动?

我有一些使用fill="url(#background)的平铺图像背景的SVG对象,我将#background定义为模式仅包含一个image。但是,当对象通过设置其x/y属性(或cx/cy,或任何其他定义偏移量的内容),背景不会随之移动。如何让背景也移动?来自HowwouldImoveanSVGpatternwithanelement我尝试设置patternContentUnits='objectBoundingBox'但这只会将图像变成纯色Blob(不过奇怪的是,根据图像着色,就好像它只是第一个像素或类似的像素).这是一个说明所有这些的jsfiddle-顶部的rect已变成纯色,然后

javascript - 在现有的、分离的 SVG 元素上创建 d3 选择

我有一个JavaScript组件,它将提供元素到它的主机。我想使用d3.js填充SVG元素。如果我让d3.js创建SVG元素并将其添加到,然后事情按预期工作:varchart=d3.select('body').append('svg');但是我已经有了一个SVG元素。我希望我的代码更接近于:varsvg=document.createElement('svg'),chart=d3.select(svg);后一种方法会填充SVG元素(如Chrome开发人员工具的元素面板中所示),但无法正确呈现。我是不是做错了?我不介意d3是否创建SVG元素,只要它不将它附加到DOM并且我可以访问它。编

javascript - 从 <object> 元素创建 Snap.svg 对象

Snap.svg的文档Snap()函数列出了创建Snap对象的三种可能方法。Snap(width,height)-创建给定尺寸的新空白Canvas。Snap(svgelement)-从现有的内联SVG元素创建SnapCanvasSnap(cssselector)-同上,但使用选择器而不是直接引用是否可以从嵌入为的SVG创建Snap对象元素或? 最佳答案 通过查看源代码,我认为只需执行Snap('#object-id')即可为您提供SVG,而不是执行.node.contentDocument。这可能是最近的一项改进,但截至今天,这已正

javascript - 在全局/根坐标中确定 SVG 视口(viewport)

在SVG元素中实际可见的内容取决于它的纵横比,它的viewBox值,及其preserveAspectRatio值(value)。例如,具有相同viewBox值(下方红色虚线)的相同SVG元素大小可以根据preserveAspectRatio具有不同视口(viewport)(下方蓝色部分):Chrome有一个viewport属性,但在我的使用中它始终是一个空的(全部为0值)SVGRect。Firefox不实现此属性。svg.getBBox()方法返回viewBox的值,而不是实际可见的视口(viewport)内容。给定对SVG元素的引用,我如何才能最轻松地确定可见内容(视口(viewpo

javascript - 使用 Webpack 将 SVG 附加到 DOM

目前,我的公司在我们的AngularJS网络应用程序的index.html中包含一个相当大的SVGSprite图,其中包含各种图标。主SVG由CSS隐藏,我们通过按ID选择它们来显示SVG中的各个图标:我们现在正尝试通过拆分SVG并将生成的部分内联到需要它们的页面上来减少我们网站的加载时间。由于我们也转向Webpack来捆绑我们的应用程序,我们希望在Angular模块中指定特定SVG文件的依赖项,然后让Webpack将SVG的内容(可能包装在div中)插入DOM.有没有办法用现有的装载机实现这一目标?我找到了基本上导出SVG内容的raw-loader。但是,我不知道如何将它与另一个将插

javascript - 是xlink :href deprecated for svg <image>s?

根据MDNxlink:href,我们应该使用href而不是xlink:href,但是在svgexamplepage上(最后更新于2017年7月6日),示例中的属性是xlink:href。使用哪个属性重要吗? 最佳答案 即将推出的SVG2标准将取消对xlink:前缀的要求。一些浏览器支持该选项,但并非所有浏览器都支持。目前安全(且向后兼容)的选择是继续使用它。 关于javascript-是xlink:hrefdeprecatedforsvgs?,我们在StackOverflow上找到一个类

javascript - 缩放和平移 svg

我正在尝试创建建筑物楼层的交互式map。我使用svgmap。我试着像这个例子一样缩放它:http://timmywil.github.io/jquery.panzoom/在此示例中,svgmap在标签中导入,并且工作正常。但是,我想在此svg上通过id引用元素,为此我必须将svg文件导入为.但是在那之后缩放不起作用((我知道Raphael和svgpan,但很难理解,我认为它们对于这个小任务来说非常重要。 最佳答案 如果你想访问你的svg元素,那么最好的方法是使用xmlHTTPRequest加载你的svg文件inline将响应文本放入

javascript - 在多个重叠的 SVG 元素上检测鼠标事件

我正在尝试检测部分重叠的SVG元素上的mousemove事件,如图所示fiddle$('rect').on('mousemove',function(){log(this.id);});现在,当将鼠标悬停在蓝色/红色交叉点上时,我想检测这两个元素上的鼠标事件,蓝色/橙色组合也是如此。正如您在日志中看到的那样,在这些情况下,当前仅针对位于顶部的蓝色框触发事件。这与指针事件有关,因为我可以让红色和橙色元素触发事件,同时通过settingtheblueelement'spointer-eventstonone悬停蓝色元素|.但是我没有得到蓝色框的事件,所以这也不是一个可行的选择。我会使用任何

javascript - SVG 作为 Div 的内联背景图像不起作用

我有一个复杂的基于Jquery-UI的对话框,我想提供一个SVG图像作为背景。我试图首先在一个简单的测试文件中使它工作,但它不起作用,尽管SVG作为独立图像工作正常。这是简化的代码:$(document).ready(function(){svg="\\";svgBase64=btoa(svg);bkgrndImg="url('data:image/svg+xml;base64,"+svgBase64+"')";$('#testDiv').css('background-image',bkgrndImg);});SomeSVGDivsvg.../svg与背景中使用的svg相同,并且可以