草庐IT

flutter_svg

全部标签

javascript - 将 src 内容动态加载到 SVG 图像

我在浏览器中呈现了一个SVG。我想按照在http://jsfiddle.net/dt1510/pXA9P/1/上的尝试动态更改其内容.在console.debug中,内容已更改,但在浏览器中是相同的。​varsrcAirline="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD0AAAA9CAYAAAAeYmHpAAADD0lEQVR42u2aq3LrMBCG+0oH9hUOPK9QWFhYemBhYWhhYWBpYGBgqGGgYduv039mq65l+SY7sjXjcS62pW/1e6Vd6eZ9heVGH46nS/FHdal/Qv

javascript - 将 SVG 路径转换为绝对命令

给定一个SVG路径元素,如何将所有路径命令转换为绝对坐标?例如,转换此路径:进入这个等效路径:这个问题的动机是thisquestion. 最佳答案 这是我想出的JavaScript代码:functionconvertToAbsolute(path){varx0,y0,x1,y1,x2,y2,segs=path.pathSegList;for(varx=0,y=0,i=0,len=segs.numberOfItems;i像这样使用问题的路径:varpath=document.querySelector('path');convertT

javascript - 如何移动 SVG 在 D3 中的位置?

我使用D3创建了一个svg。然而,它只出现在屏幕的左上角,或者被附加到另一个svg上。无论如何我可以使用JavaScript移动它吗?例如:varsvg=d3.select("body").append("svg").attr("width",200).attr("height",200); 最佳答案 使用d3js+Jquery://svgdesignvarsvg=d3.select("#chart").append("svg").attr("width",200).attr("height",200);//svgrepositio

javascript - 根据内容调整 SVG 元素的大小

我想根据其内容调整SVG元素的尺寸。JSfiddle:http://jsfiddle.net/4pD9N/这里我有一个例子。SVG应该“缩小”以适应元素+每边10px的边距。换句话说:我想为未使用的空间裁剪svg...我知道我必须使用getBBox。但是如何计算总宽度和高度呢? 最佳答案 默认情况下,SVG绘图的原点与容器的原点相同。这意味着您绘图的(0,0)位于SVG元素的左上角。要使内容居中,您应该相对于容器平移绘图。可以通过相对于getBBox的结果修改SVG元素的viewBox属性(期望四个值:"minxminywidthh

javascript - 如何防止默认工具提示悬停在 svg 元素上?

我正在尝试显示在HTML页面中绘制的交互式SVG图像。我没有使用javascript/jQuery语言的经验,但使用PowerTip等一些jQuery插件,我目前能够在将鼠标悬停在SVG元素上时显示自定义工具提示。自定义工具提示出现,但一秒钟后消失,当它们被默认工具提示的外观(在所有浏览器中)关闭时,只显示“标题”元素的内容。有没有办法禁用默认工具提示?下面是我使用PowerTip显示自定义工具提示的方法。$('#myGraph.node').on({powerTipPreRender:function(){vartitle="";$('atext',this).each(functi

javascript - 为 svg :image 设置圆 Angular

我正在尝试使用d3.js为ssvg:image(嵌入在SVG中的图像)制作圆Angular。我找不到如何正确设置图像样式的方法,因为根据W3C规范,我应该能够使用CSS,但较窄的边框和圆Angular边缘对我来说都适用。提前致谢。vis.append("svg:image").attr("width",width/3).attr("height",height-10).attr("y",5).attr("x",5).attr("style","border:1pxsolidblack;border-radius:15px;").attr("xlink:href","http://www

javascript - 动态添加 SVG 渐变

我有这个带有路径的SVG容器。我想编辑它,所以路径的填充将是一种模式。这是我失败的尝试:我添加一个渐变:$('svgdefs').prepend('');然后更改路径的填充:$(base+'svgpath').each(function(){this.setAttribute('fill','url(#MyGradient)')}这行不通。我错过了什么? 最佳答案 您的问题(您“缺少的”)是jQuery在XHTMLnamespace中创建新元素,而SVG元素必须在SVGnamespace中创建。您不能在SVG元素的字符串中使用原始代

javascript - Angular 2 - 如何将 SVG 属性数据绑定(bind)到组件属性?

我正在学习Angular2。为此,我正在尝试创建基本示例。我有一个包含此字符串的变量的类:M916.2L4.812l-1.41.4L919217l-1.4-1.4L916.2z我正在尝试将该字符串用作svg元素的参数只是为了检查:这个svg有效:模板中的变量icon包含正确的字符串。我正在尝试这样做:并将"添加到参数d中。但我无法使其工作 最佳答案 您需要使用attributebinding带有SVG元素: 关于javascript-Angular2-如何将SVG属性数据绑定(bind)

javascript - 动态禁用 SVG 元素的触摸操作(过度滚动)

我在Chrome上遇到触摸屏过度滚动的问题。我有一个包含SVG元素的文档,其中包含一些形状,比如一个矩形:现在,我想使矩形可拖动,这意味着我想禁用相应上的各种触摸操作。元素,通过设置它的样式属性touch-action:none.这在除Chrome之外的所有桌面浏览器上都能正常工作。在Chrome上,当我在一个矩形上触摸并移动时,浏览器的过度滚动功能会启动。这会导致浏览器窗口笨拙地移动,以及我在矩形上设置的所有指针事件都被取消。即pointermove注册几分之一秒,然后在过度滚动开始时停止。pointerup即使在触摸被释放时也不会被调用。现在,如果我有一个HTML元素而不是SVG元

javascript - react-native-svg 中 <Rect/> 的动画宽度

我为进行了简单的动画插值元素,但是我在我的用户界面上没有看到任何变化,就好像宽度保持为0。我手动将我的最终值添加到组件中作为width={149.12}并且显示正确,因此我现在有点困惑为什么它没有从动画中获取相同的值?react-native@0.57.1​​react-native-svg@7.03针对iOS12这是完整的实现,本质上是一个包含当前值和总值的法力和健康条,即50和100应该显示矩形的一半宽度。(示例使用typescript,但如果需要,答案可以用纯js编写)import*asReactfrom'react'import{Animated}from'react-nati