草庐IT

html - SVG 文本路径,确定文本何时超出路径

我有下面的代码来沿着路径显示文本。我打算做一些动态的,我可以只输入我想要的东西,它会沿着路径显示出来。还没有弄清楚如何做到这一点,欢迎提出任何建议。但是我的问题是,我如何准确地找出文本超出路径末尾并且不再显示的位置。我的想法是当我让它动态工作时,如果用户键入的句子比路径可以处理的句子长,它会告诉你文本将从某个点被截断。在这种情况下,用户只看到“Thequickbrownfoxjum”这个词,前面我希望错误消息说“psoverthelazydog”无法显示,或者至少至少说“Thesentenceis太长了,没有完整显示"Thequickbrownfoxjumpsoverthelazydo

html - 如何将 svg + xml 放入 css 样式文档而不将其编码为 base64?

目前我有类似的东西:background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFka

html - 使用 CSS 更改 svg 图像的颜色

这个问题在这里已经有了答案:imgsrcSVGchangingthestyleswithCSS(25个答案)关闭6年前。我的html文件中有以下svg图像:现在,我尝试使用此CSS代码更改颜色:.svgpath{fill:black;}然而,什么都没有改变。使用css更改svg图像路径颜色的正确方法是什么?谢谢!

html - 在 d3 svg 中对齐文本

由于我是图书馆的新手,所以我在d3中执行一项简单任务时遇到了问题。使用渐变example,我在页脚div元素中插入了一个线性渐变:#footer{position:absolute;z-index:10;bottom:10px;left:50%;width:300px;margin-left:-150px;height:20px;border:2pxsolidblack;background:rgba(12,12,12,0.8);color:#eee;}varsvg=d3.select("footer").append("svg:svg").attr("width",300)//can

xml - SVG xmlns 属性有什么作用?

我看过嵌入式SVG的源代码,如下所示:...和其他看起来像:...指定xmlns/xmlns:xlink属性到底有什么作用? 最佳答案 在XML文档中,属性和元素属于namespace。这是为了防止来自不同技术的元素发生冲突,例如SVG元素和HTML如果一个元素被称为svg:a另一个html:a则可以区分元素xmlns:xlink表示以xlink为前缀的元素应该由理解该规范的用户代理使用xlink规范进行解释。xmlns定义了默认命名空间,因此不需要前缀,您可以只写而不是namespace:a并且UA知道它是一个SVG元素而不是HT

html - 如何将坐标添加到 SVG 折线?

如何使用JavaScript将坐标添加到现有的SVG折线?我正在使用IE9(在.hta文件中)并且需要能够动态地将新点附加到折线。目标是能够创建折线图。我提前道歉,我完全不知道如何引用这个属性。对此的任何指导将不胜感激。 最佳答案 如果给多段线添加一个id属性,让它看起来像这样您可以通过document.getElementById获取对它的引用最简单的方法是通过“点”属性上的getAttribute/setAttribute来操作它varpoints=polyline.getAttribute("points");points+=

javascript - 为什么google map用Canvas做距离测量而不是SVG?

我使用chrome调试工具来比较谷歌地图和其他map。我发现对于距离测量功能,谷歌地图使用Canvas绘制路径,而其他一些则使用SVG。我假设这可能是因为Canvas更快。但是SVG在绘制路径方面有很多好的部分。还有其他原因吗? 最佳答案 每个SVG元素都是一个DOM元素,拥有10,000多个SVG路径会导致与Canvas相比速度大幅下降。因此,一种可能性是它的性能。但最初Android并不渲染/支持SVG。这可能是Google选择使用Canvas的真正原因。如今,TabletAndroid(3.0+)支持SVG,但1.0-2.3不

html - 拖动旋转 SVG :g group

我的目标是拥有一个svg:ellipse带有四个控制点,您可以使用它们来调整大小和旋转。如果将旋转变换应用于椭圆本身,我的代码可以正常工作,但我想将旋转应用于容器svg:g以便控制点同时旋转而无需大量额外代码。当我将变换应用到组时,我假设旋转行为不正常,因为我没有正确考虑变换后的坐标。参见此处:http://jsfiddle.net/PbKYn/3/请注意,旋转开始时角度在正值和负值之间闪烁,鼠标旋转2pi只会旋转1pi的形状。(不过我不认为我的angleBetweenPoints函数是错误的,因为如果我将旋转应用到而不是,旋转是完美的。)我做错了什么?谢谢-

html - 计算 HTML 页面中 SVG 元素的大小

我如何可靠地询问SVG元素在主页上占用的大小(以像素为单位)?svg.offsetWidth和svg.getBoundingClientRect().width均适用于Chromev34。这些都不能在Firefoxv29中正常工作。(前者为空,后者返回错误值。)测试页:http://jsfiddle.net/dL5pZ/3/这个问题的动机是为thisanswer获得可靠的实现,这需要知道元素外部的纵横比。此外,对于thisquestion我需要知道SVG的实际大小,或者至少需要知道在不同调用和调整大小的元素之间返回比例值的内容。 最佳答案

html - SVG 内联 CSS 不显示在 Internet Explorer 中

关于stackoverflow的第一个问题,希望它不会太愚蠢。我一直在尝试找出一种方法来显示带有拆分事件日期的日历。我想到的是使用带有内联css的SVG图形作为特定日历表格单元格的背景,以便拆分有拆分的日期。它在Firefox和Chrome中运行良好,但图形在InternetExplorer中不显示(我试过9和10,但没有试过11)。首先使用javascript生成日历,并通过将css类添加到来自JSON数据的目标单元格来放置事件。这里是用于应用背景的CSS类的一小段,完整示例中包含HTML:.calendartd{position:relative;}.calendar.split{