草庐IT

svg-edit

全部标签

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

javascript - SVG 捕获鼠标坐标

我知道之前有人在这里问过关于svg鼠标坐标的问题,但我对我目前遇到的行为感到很困惑,似乎没有一个线程能完全解决它。我用来捕捉坐标的方法:varpt=svg.createSVGPoint();//Createdoncefordocumentfunctionalert_coords(evt){pt.x=evt.clientX;pt.y=evt.clientY;//Thecursorpoint,translatedintosvgcoordinatesvarcursorpt=pt.matrixTransform(svg.getScreenCTM().inverse());console.log

javascript - 响应式或流畅布局的跨浏览器 SVG?

我选择使用Raphaëljavascript库以获得广泛的浏览器支持,但我无法让SVG在除Chrome和Firefox之外的任何浏览器中正确显示。我已经为此绞尽脑汁一段时间了,很想听听如何让SVG在响应式布局中工作。Chrome和Firefox完全按照我的意愿显示SVG。它统一缩放,保持正确的纵横比和给定宽度的父级百分比。InternetExplorer保持正确的宽高比,但不能与其父级一起正确缩放。Safari在宽度上与其父级正确缩放,但在高度上不行。相对于父容器的高度以某种方式设置为100%。Javascriptvarmenu=Raphael('menu','100%','100%'

javascript - Raphael 沿着路径的 SVG 动画

我有一个关于SVG动画的有趣问题。我正在使用Raphael沿着圆形路径制作动画obj=canvas.circle(x,y,size);path=canvas.circlePath(x,y,radius);path=canvas.path(path);//generatepathfrompathvaluestringobj.animateAlong(path,rate,false);circlePath方法是我自己创建的,用于生成SVG路径符号中的圆路径:Raphael.fn.circlePath=function(x,y,r){vars="M"+x+","+(y-r)+"A"+r+",

javascript - 在带有 IE 的 JavaScript 中使用 XMLSerializer 时,SVG 标记上不需要的 namespace

我正在尝试使用JavaScriptDOMAPI的XMLSerializer将SVG元素转换为其代表性标记。这是用于创建元素并将其序列化的基本代码:varel=document.createElementNS('http://www.w3.org/2000/svg','svg');el.setAttribute('xmlns','http://www.w3.org/2000/svg');el.setAttribute('xmlns:xlink','http://www.w3.org/1999/xlink');varmarkup=(newXMLSerializer()).serialize

javascript - 使用 safari 在 Canvas 中绘制包含 html 的 svg

我正在尝试为网站创建一些动态创建页面的缩略图,我找到了一个解决方案,方法是在svg中添加html,然后我在Canvas内的图像上绘制图像,然后在绘制图像后调整大小.此解决方案适用于firefox和chrome,但不适用于safari,svg似乎没有绘制我只是得到一个空白页面。即使我trycatch并且我在网上找不到解决方案,我也没有收到任何错误。我的html只是一个带有Canvas的基本测试页面,我试图在头部添加一个meta标签但是也没用。这是我写的代码:varcanvas=document.getElementById('canvasTest'),context=canvas.get

javascript - 计算 SVG 文本的垂直高度

我有一个字符串数组。说,['Jan11','Feb11']我正在用这些字符串创建一个垂直文本Jan11渲染svg后,我发现文本的高度为36px。现在有没有一种方法可以在给定字体大小的情况下计算预先呈现的文本的高度? 最佳答案 您可以使用getBBox方法来计算SVG节点的尺寸。vartextNode=document.getElementsByTagName('text'),bbox=textNode.getBBox();//bboxnowhavex,y,widthandheightproperties