草庐IT

mermaid-svg-Rc

全部标签

javascript - 在网页上动画旋转 SVG 元素

所以我在网页中嵌入了一个在Inkscape中创建的SVG文件,我希望它能够缓慢旋转。我试过使用Javascript并将动画命令直接插入SVG,但没有任何效果。我不想为这个任务加载整个JS库。这是我目前所拥有的:vargear=document.getElementById("gear");window.setInterval(function(){//Somehowanimatethegear.},10); 最佳答案 有趣的话题,因为AFAIK目前Firefox不支持SVG中的动画。所以我做了一些调查并找到了一个可行的解决方案。在F

html - 将工具提示添加到 SVG 矩形标签

将工具提示添加到的最佳解决方案是什么??我用几个创建了SVGmap标签,我想在鼠标悬停时显示工具提示。使用title属性很好,但是是否有任何选项如何使用CSS/Javascript/jQuery重新设置它的样式,或者是否有更好的选项来添加工具提示? 最佳答案 SVG使用标题元素,而不是属性,但是您不能设置它们的样式。如果您需要样式,则需要将标题动态创建为元素并使用javascript将其放置在正确的位置。这是默认工具提示的样子...There'ssometextThere'sanothertext

javascript - 获取 SVG 线、矩形、多边形和圆形标签的长度

我设法在svg中找到路径的长度,但现在我想从SVG中找到直线、矩形、多边形和圆形标签的长度,我现在真的迷路了,还有线索吗?还是已经有一些功能,比如路径? 最佳答案 为了防止其他人想要找到这些标签的长度,我为每个标签制作了一些函数,对它们进行了测试,我说它们工作得很好,这就是我所需要的。vartools={/****Usedtogetthelengthofarect**@paramelistherectelementex$('.rect')*@returnthelengthoftherectinpx*/getRectLength:fu

html - 如何去除 HTML5 中 <svg> 和 <td> 之间的空格?

我使用下面的代码将SVG嵌入到HTML5中。现在我唯一无法解决的问题是之间有太多空间。和在浏览器中查看HTML文件时。谁能告诉我如何删除空格?提前致谢!更多详情:对不起,我忘了说我用的是哪个浏览器。我发现当我使用IE9时,SVG和左右栏之间有很多空间。但是,当我使用Chrome时,SVG与顶部和底部栏之间有很多空间。这很奇怪。我编辑下面的代码。我加svg{边距顶部:0px;底部边距:0px;右边距:0px;margin-left:0px;background-color:yellow;在代码中。我想要做的是删除黄色空间。现在问题变得更具体了。SarShips:scstable{bord

html - div 容器中的垂直居中 svg

你能帮我理解为什么我的svg拒绝调整高度以帮助我在div容器中垂直居中吗?如何在容器中处理对齐垂直svg?我似乎svg行为不像div那样标准......主要思想是将svg水平和垂直居中到一个div中。我试试这个:https://jsfiddle.net/gbz7rp7u/1/#&togetherjs=0n9iL62pHv#svg-container{background-color:red;}#svg-1{margin:autoauto;display:block;height:30%;} 最佳答案 html,body{height

html - 纯 CSS3 或 SVG 动画 donut chart

我正在寻找纯CSS3或SVG动画圆环图。需要中间的圆圈填充颜色要用灰色和蓝色分割的外圈,即:蓝色80%完成,灰色20%剩余。需要在圆圈中间放置文字。我找到了一个例子http://jsfiddle.net/4azpfk3r/任何人都可以帮助创建/编辑以上内容以满足我的需要吗?到一半了。CSSLayer1谢谢 最佳答案 试试这个,它使用stroke-dasharray创建长度为251.2的笔划,请参阅here供更多引用。stroke-dashoffset属性指定破折号模式中开始破折号的距离seehereText此处笔划填充80%(使用2

firefox - 如何将 SVG 和 HTML 混合到一个页面中?

我一直在使用jQuery.svgplugin做一些SVG渲染,它工作得很好,但我也想让服务器将一些SVG渲染到页面中,但我无法让它工作。如何将如下所示的一些SVG添加到页面中,以便Firefox呈现它?我是否需要一个元标记来说明页面中有SVG内容或以某种方式定义SVG命名空间? 最佳答案 参见thislink(HTML中的SVG介绍@Mozilla开发者中心)。内联SVG示例canbeseenhere. 关于firefox-如何将SVG和HTML混合到一个页面中?,我们在StackOve

html - 如何在我的网站上显示 SVG 图像?

我有一个包含SVG图像的网站,但我遇到了问题。我的网站与我的主机位于Apache服务器上。当我的站点在我的本地服务器上时,我的图像显示得很好,但现在它在我的主机上图像不再出现。我控制的url是正确的。我可以直接在图片上使用url访问,但我的网站上没有显示图片。HTMLLogoCSS;div.main-content-logoh1#header-logo.logo{background:url("../img/logos/logo-main.svg")no-repeatscroll00/260pxautorgba(0,0,0,0);color:rgba(0,0,0,0);text-ind

javascript - 从 DOM 拖放,放入 Canvas 或 SVG

我将要构建一个工具,允许用户将列表中的项目拖放到Canvas中以构建树/组织结构图。想知道是否有可能将一个常规的li-node拖到Canvas/svg上并检测Canvas上的哪个位置以及哪个元素被丢弃了?也许您有比使用canvas/svg更好的建议?我唯一的要求是用户应该能够直观地从列表中拖动项目以构建图表/组织结构图。 最佳答案 是的,可以拖动到另一个元素上/上方并确定您在该元素上的位置。对于SVG,您需要使用如下代码将鼠标坐标转换为Canvas局部空间:functionmouseXY(evt){varmxy=svg.create

javascript - 在 for 循环中更改 SVG 行的 strokeDashoffset

我正在尝试为一条展开的线设置动画。我已经在css中拥有它,但我需要在javaScript中完成它,因为这是我可以获得我需要的路径长度的唯一方法。我认为我非常接近,但它不起作用!有任何想法吗?以下是我的代码。如您所见,我得到了路径的长度,并给它一个该长度的strokeDashArray。这意味着该线将是虚线,但破折号会填满整条线。诀窍是减小strokeDashoffset值,因为它决定了破折号的开始位置。因此,如果它也从pathLength开始,则该线将完全不可见,并且减小该值将显示路径。顺便说一句,我知道这是可能的:)如前所述,我已经在css中使用它了。varelement=docum