如何保留 svg 文本中的空格

2023-12-10

要在 svg 的文本元素中保留空格,应使用 'xml:space="preserve"' 作为文本的属性(jsfiddle)。但是,它不起作用。我究竟做错了什么?

    // init snap
    var svgElement=document.getElementById("mainSvgId");
    var s = Snap(svgElement).attr({height: 300, width: 300});

    // greate group with rectanle
    var parentGroup=s.g().attr({id: "parent"});
    var rect1 = s.rect(0, 0, 200, 200).attr({fill: "#bada55"});
    parentGroup.add(rect1);

    // add text with preserve attribute
    var text = s.text(0, 20, "   text1    text2");
    text.node.setAttribute("xml:space", "preserve");
    parentGroup.add(text);

你快到了。您需要在 xml 命名空间中正确创建需要 setAttributeNS 而不是 setAttribute 的属性

text.node.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space", "preserve");
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何保留 svg 文本中的空格 的相关文章

  • xlink:href 属性的 Selenium/java-xpath

    我试图找到use具有属性值的元素 aaa 对于下面的片段
  • SVG:一个过滤器中的多种效果

    我正在尝试在单个 SVG 过滤器中实现多个阴影 但我相信我的问题比这更通用 如何将多种效果添加到单个 SVG 滤镜中 就我而言 这就是我具体想做的事情 我有一个当前包含单个路径元素的 SVG 文档 并且我已对该路径元素应用了单个阴影效果 我
  • svg 中的简单填充图案:对角线阴影

    我如何填充 SVG 形状 不是使用单一颜色 图像或渐变 而是使用阴影图案 如果可能的话对角线 已经两个小时了 我什么也没发现 至少在2005年之后 我认为一个可能的破解方法是使用孵化的 PNG 作为填充 但这并不理想 我在互联网上也没有找到
  • iOS/WKWebView 上 SVG 的随机故障渲染

    在我们的 iOS 应用程序中显示 SVG 图标时 我们遇到了奇怪的间歇性 非常偶然 渲染故障 基于WKWebView 当它确实发生时 它似乎可能与 CSS 相关 因为如果我在调试页面时在 Safari 中更改一些随机 甚至完全不相关 的 C
  • 在三角形内强制图表 d3.js

    我正在研究 d3 js 力图 我有一个问题 是否可以在具有某些坐标的三角形内制作力图 这是我的代码 var width 500 var height 500 margin var marginLeft 10 var marginTop 10
  • 在 python 中将 Latex 代码转换为 mathml 或 svg 代码

    是否有任何 python 代码允许获取乳胶代码 用于方程 并将其解析为 mathml 或 svg 代码 一个以字符串 latex 代码 作为参数并输出字符串 svg 或 mathml 代码 的简单函数将是完美的 附言 我找到了这个http
  • 在 JavaScript 中动态创建 SVG 链接

    我正在从 JavaScript 动态创建 SVG 元素 它对于像矩形这样的视觉对象工作得很好 但是我在生成功能性的 xlinks 时遇到了麻烦 在下面的示例中 第一个矩形 静态定义 在单击时可以正常工作 但其他两个 用 JavaScript
  • 用渐变色绘制一个 D3 圆

    如何用渐变颜色画一个圆 比如说 从黄色到蓝色的渐变 通常 要创建黄色圆圈 我们可以使用以下代码 var cdata 50 40 var xscale 40 var xspace 50 var yscale 70 var svg d3 sel
  • 用 Ruby 或 Python 解析 SVG 的库 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 SVG 是一个庞大的标准 它基于 XML 我过去曾将 SVG 解析为 XML 然而 有些事情很难 例如
  • 矩形相当于文本的文本锚点表示属性吗?

    是否有一个与文本的文本锚点表示属性等效的矩形 我希望能够从左侧 右侧或根据情况定位矩形 我知道这可以通过一些简单的计算来完成 但我只是想知道是否已经存在内置的东西 文本锚点演示属性上的链接 https developer mozilla o
  • 具有多个路径的 SVG 剪辑路径的悬停事件

    我有一个 SVG 演示图像 其中包含多个正在剪辑动画 GIF 的圆圈 当用户将鼠标悬停在每个圆圈上时 是否可以观察每个圆圈的悬停事件 例如左上角的圆圈或右中角的圆圈 另外 当这些圆圈悬停时 是否可以操纵这些圆圈上的颜色叠加 EDIT 理想情
  • 尝试旋转和变换 SVG 路径 - 我需要三角学计算吗?

    我正在尝试使用鼠标 SVG 路径进行操作 该路径代表电子电阻器的符号 该符号需要使用 引线 末端进行操作 如果您可以想象真实的电阻器 因此 我试图实现拖动第一个点周围 第二个点仍然存在 并且当在新坐标上拖动第一个点时 路径的所有点都按比例表
  • 将外部 SVG 加载到 DOM 中,当前文档而不是子文档

    我正在尝试将外部 SVG 文档加载到一个简单的网页中 以便我可以将其用作基本的氯罗佩斯地图 然而 使用HTML 中的结果是 SVG 作为子文档加载 基本上我无法使用 jquery 按 ID 查询 SVG 路径 例如 NY css fill
  • 如何在 Firefox 中缩放 SVG 背景图像而不考虑宽高比?

    我有一个CSSbackground image设置在具有流体高度和宽度的元素上 它是一个 SVG 预期的行为是让它向任何必要的方向拉伸以覆盖整个元素的区域 在 Chrome Safari 甚至是糟糕的 Internet Explorer 9
  • 使用 html2canvas 将 highcharts 图表渲染为 pdf 在 IE 和 Firefox 上不起作用

    我们使用 html2canvas js 和 html2canvas svg js 版本 0 5 0 beta1 以及 highcharts js 将圆环图下载为 pdf 这在 Chrome 中按预期工作 但在 IE 和 Firefox 中不
  • 在 SVG 中绘制 DOM 对象时如何在 Canvas 中使用 Google 字体?

    根据 Mozilla 的文档 您可以在 Canvas 上绘制复杂的 HTML 例如this https developer mozilla org en US docs Web API Canvas API Drawing DOM obje
  • 如何在 vue.js 中使用 SVG.js 插件?

    我在用svg js在我的 Laravel 项目中运行vue js 这就是我使用的方式svg js Step 1 安装svg js作为我的 vue 应用程序中的插件 import svgJs from svg js dist svg expo
  • 将元素添加到 D3 圆包节点

    我正在尝试制作一个可缩放的圆形包装图 我希望每个子圆圈包含一个较小的图表 该图表始终具有相同的结构 即 4 列 只有条形的高度会改变 我尝试添加一个简单的rect到目前为止我的图表 但矩形没有添加到圆圈中并且是静态的 JS var marg
  • 如何以 JavaScript 编程方式获取旋转的 svg 文本边界

    我正在动态渲染 SVG 图像并创建旋转文本 如果旋转的文本与其他文本重叠 我需要删除该文本 但我无法测量旋转的文本来创建边界并检查下一个标签文本区域 我创建了 3 个 SVG 元素来解释 SVG 1 显示重叠的文本 SVG 2 显示重叠的旋
  • 分配函数后如何删除 onmouseout 事件?

    我有一个问题 我正在为 onmouseout 事件分配一个函数 但运行该事件后 我需要将其删除 将非常感谢您的帮助 这取决于你的代码 如果你用 d3 这样做 那么你可以说 在 onmouseout 事件函数中 element on mous

随机推荐