草庐IT

mermaid-svg-Rc

全部标签

javascript - 当 svg 的高度动态变化时如何使用 viewbox

我有一个可调整大小的div。它有两个内部div。其中一个内部div中有一个svg元素。在svg元素中,我动态地添加和删除内容,这样每次我都在我的svg中添加内容。我通过向它添加20px来增加它的高度,当我删除它时,我将高度减去20px。当我的svg高度变得大于其父div时,父div中会出现一个滚动条。同样,当svg高度小于父div时,滚动条将被删除。当我调整大小时问题就开始了。我在我的svg中添加了一个viewbox选项来调整大小。但是当我增加大小时,我的一些svg元素是不可见的。当我减小尺寸时,我的svg被放置在较低的位置,留下空白空间。在我的脑海里,如何用viewbox属性处理sv

javascript - 是否可以将 SVG 对象的自定义属性设置为数字而不是字符串?

我正在为SVG-G元素(SVG组对象)分配人工属性。我使用SVG转换移动组及其内容,并将组的x/y坐标及其宽度/高度存储在这些属性中。我正在使用D3Javascript库和调用:embeddedElemContainer=nodeBoxContainer.append('svg:g').attr('x',x).attr('y',y).attr('width',width).attr('height',height)结果如下:没关系,唯一困扰我的是属性值存储为字符串。如果我想将它们用于某些计算,我必须强制转换。parseInt(@embeddedElemContainer.attr('x

javascript - 缩放传单 map 时,SVG 圆圈不会重新定位

我正在使用d3在传单map上添加svg圆圈。我的fiddle在这里http://jsfiddle.net/nextstopsun/C3U8g/我添加了一个reset()函数来映射viewreset事件,以计算包含所有圆圈的svgg元素的转换。此函数在mapView重置事件中调用。svg.attr("width",topRight[0]-bottomLeft[0]).attr("height",bottomLeft[1]-topRight[1]).style("margin-left",bottomLeft[0]+"px").style("margin-top",topRight[1]+

javascript - SVG 仅在 safari 中悬停时调整大小

我有一个svg在safari中悬停时调整大小的奇怪问题。我正在使用jquery的悬停将页面上的svg替换为稍微不同的svg。这项工作在除safari之外的所有浏览器中都能正常工作,safari出于某种原因会在鼠标悬停和鼠标移出时完全调整svg的大小。我的svg的高度是在css中设置的img.svg-graphic{height:180px;}并以图片的形式显示在页面上当我将鼠标悬停在容器上时,我将svg换成另一个,然后在悬停时返回默认值。$('.container').hover(function(){$('.svg-graphic').attr('src','svg-icons/ve

javascript - 将数据传递给 d3.svg.line()

所以,我有一个像这样的Javascript对象:-对象{数据:Array[39],时间:Array[39]}object.data是一个值数组,而object.time是一个javascript的日期对象数组。我正在尝试在D3中绘制折线图。我的代码的相关部分://Linefunctionvarline=d3.svg.line().x(function(d,i){returnx(d.time);}).y(function(d,i){returny(d.data);});//DrawLinesvg.append("path").datum([data]).attr("class","lin

javascript - 尝试制作一个 for 循环来绘制 SVG

我刚开始学习SVG,想创建一个for循环来在我的HTML中绘制许多圆圈。是否可以按照我尝试的方式完成,或者我尝试做的是不可能的?MyfirstSVGforloopvarcirclex=50;varcircley=50;for(vari=0;i}; 最佳答案 那么近又那么远你不能将html代码直接放入JavaScript中(那会很酷)JavaScript添加新元素的方式是通过DOM操作。那么让我们看一下代码:首先创建一个带有xmlns的空SVG文档(只需设置xmlns="http://www.w3.org/2000/svg",它在99

javascript - Angular 2 错误- RC4 版本没有将 "exportAs"设置为 "ngModel"的指令

我在我的应用程序中使用了Angular2表单,并且我已经根据给定的链接创建了表单。https://angular.io/docs/ts/latest/guide/forms.html为了验证和使用表单API,我设置了ngModel值,如#name="id"#id="ngModel"并抛出脚本错误。但如果我将#id="ngModel"设置为#id="ngForm",它就解决了。但就我而言,我必须将模型值设置为ngModel。下面是我的html页面。EmployeeIDEmployeeIDisrequiredEmployeeNameEmployeeIDisrequiredDOJDOJisr

javascript - 使用纯 javascript 围绕中心缩放 SVG

我有一个问题,可能无法很好地理解坐标在SVG中的工作原理。我有一个缩放svg图形的javascript函数,例如:varg=document.getElementById("graph");varnm=g.getCTM().multiply(k);//kisthescalefactorg.setAttribute("transform","matrix("+nm.a+","+nm.b+","+nm.c+","+nm.d+","+nm.e+","+nm.f+")");关键是在缩放后中心会稍微平移,因此图形失去了“地理”中心。我如何才能确定我需要哪种翻译才能“围绕”其中心缩放图形?谢谢。

javascript - 使用给定的 x 坐标获取沿 SVG 路径的点的 y 坐标

我正在使用raphael.js绘制一个简单的SVG折线图,如下所示:当用户悬停图形时,id喜欢在光标的X位置显示一个指向该线的弹出框,并在该线所在的Y位置像这样的X位置:我需要找到路径并找到给定X坐标的Y坐标。 最佳答案 基于@Duopixel的D3解决方案,我使用DOMAPI在纯javascript中编写了以下函数供我自己使用:functionfindY(path,x){varpathLength=path.getTotalLength()varstart=0varend=pathLengthvartarget=(start+en

javascript - D3 事件在隐藏的 svg 元素上触发

我似乎找不到这个问题的答案,我花了一段时间将它重新创建为一个独立的fiddle/笔,但我终于找到了。我正在开发使用D3绘制和操作svg图形的Vaadin应用程序。在某一点上,屏幕上有svg,它具有visibility:hidden。这在所有浏览器中都能完美地找到。这些隐藏元素有点击和鼠标悬停事件,在所有浏览器中都能找到但是在firefox版本34中,隐藏元素仍然会在它们仍然隐藏时触发它们的事件(单击和鼠标悬停)。为了更好地解释:当一个按钮被隐藏时,它的鼠标悬停事件不应该触发,当它可见时应该触发。这就是它在所有浏览器中的工作方式,除了firefox34、35beta和36开发版。它在Fi