草庐IT

svg-edit

全部标签

javascript - 将 SVG 绘制到 Canvas 中并使用其 ID 操作绘制的元素

我有一个SVG文件加载到中标签。我正在使用javascript来操作这个svg中的一些元素。例如:vartheSvgXml=document.getElementById('theObject').contentDocument;theSvgXml.getElementById('theElementId').style.display='inline';theSvgXml.getElementById('theElementId').style.fill='red';theSvgXml.getElementById('anotherElement').style.display='n

html - HTML 中的 SVG - 根据页面宽度调整路径大小

我的文档中有一个SVG元素,它通过css具有100%的宽度。这只会重新调整svg元素的大小;它不会调整路径的大小。这是我的路径代码:我需要M的x分量与屏幕左侧对齐,确实如此,而且我还需要q的5003000500-100靠在屏幕的右侧。我将如何做到这一点? 最佳答案 给你的SVG元素一个viewBoxattribute指定要显示的内容:基本上,“这张图片的内容是500个单位宽和100个单位高,从0x,200y开始;请务必保持它可见”实际可见:http://jsfiddle.net/jGnST/阅读有关preserveAspectRat

javascript - 加载和显示 svg

如何将.svg加载到fabricjs.html页面中?我的Fabricfiddle尝试加载http.svg文件,但我当然尝试过本地版本。我使用了从adobeillustrator和fabric本身生成的.svg文件。fabric.loadSVGFromURL(gvs_svgSrc,function(argo){//alert("loadhandler:"+argo);//...returns:#lvo_SVG=argo.set({left:250,top:200,angle:0});lvo_SVG=argo.scale(0.25);gvo_canvas.add(lvo_SVG);gvo

HTML5 - Chrome 中的 SVG 文本选择错误?

我正在用HTML5开发一个Web应用程序,使用SVG绘制路径和文本。在OSX上使用Chrome进行测试时,我遇到了一些非常丑陋的行为,这似乎是Chrome中的错误。考虑以下由路径交叉的SVG文本的最小示例:TestText(http://jsfiddle.net/wPYvS/)我不希望在使用光标拖动SVG文本时选中(或突出显示)它。所以我添加了CSS属性“pointer-events:none”,它在除Chrome之外的所有浏览器中都按预期工作。在Chrome中,当您仅在文本上拖动时,不会选择任何内容。但是,如果您拖过路径挡住的文本(因此,实际上您拖过路径),文本会突出显示。我能够在C

html - 带有脚本元素的 HTML 中的 SVG

我在HTML页面中有一个内联SVG代码,该脚本在Firefox7.0中正确调用,但在Chrome16.0中不正确。为什么会这样?我还应该对代码进行哪些修改才能在Chrome中调用javascript? 最佳答案 有趣的问题。一些注意事项。在普通HTML中,不会自动关闭,后面的任何内容都将成为脚本元素内容的一部分。在里面元素,是自闭合的并形成一个完整的元素。Firefox和Chrome都能做到这一点。但是,HTML5规范指出,只有当解析器遇到结束标记时,才应处理脚本。由于元素没有结束标记,因此不应处理脚本。这就是Chrome所做的。然

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