如何保留 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 文本中的空格 的相关文章

  • SVG 过滤器在 Firefox 中不显示,在 Chrome 中工作正常

    我想要深色背景上的一段深色文本外面有白色的光芒 虽然默认阴影滤镜 https developer mozilla org en US docs Web CSS filter drop shadow 2在 CSS 中 比如filter dro
  • SVG定位

    我正在使用 SVG 但在定位方面遇到了一些问题 我有一系列形状包含在g组标签 我希望像容器一样使用它 这样我就可以设置它的 x 位置 然后该组中的所有元素也会移动 但这似乎不可能 大多数人如何定位您希望串联移动的一组元素 有相对定位的概念吗
  • 裁剪 SVG 的正确方法?

    我对 SVG 图像完全感到困惑 我想将图像裁剪为其核心内容 我想通过指定其视图框和 或视口和 或其他任何内容来裁剪它 除非我不想更改折线元素中的任何点 图像按原样呈现类似这样的内容 注意 边框仅用于说明目的 边框实际上并不是 SVG 的一部
  • 使用路径id获取SVG路径d属性

    我有单独的 json 包含 SVG 路径 Id 有没有办法使用路径 id 获取 SVG 路径 d 属性 或者有没有办法只使用路径 ID 来填充 SVG 路径 您可以通过调用 document getElementById 来获取路径元素 然
  • 尽管 getBoundingClientRect() 是假的,但如何将事件坐标转换为 SVG 坐标?

    我正在尝试根据鼠标的位置在 SVG 元素上动态绘制内容 不幸的是 我很难将 mousemove 事件中的鼠标坐标转换为 SVG 元素的坐标空间 这是我一直在测试的一个有缺陷的函数 CylinderDemo prototype handleM
  • 在 d3.js 中换行长文本

    我想将长文本元素换行为宽度 这里的例子取自博斯托克的wrap功能 http bl ocks org mbostock 7555321 但似乎有两个问题 首先 wrap的结果没有继承元素的x值 文本左移 其次它绕在同一条线上 并且lineHe
  • 快速响应的交互式图表/图形:SVG、Canvas 还是其他?

    我正在尝试选择正确的技术来更新一个项目 该项目基本上在可缩放 可平移的图表中渲染数千个点 当前使用 Protovis 的实现性能不佳 在这里查看 http www planethunters org classify http www pl
  • 使用 Javascript 动态添加时,SVG 元素无法正确缩放

    我正在尝试使用 Javascript 在 Bootstrap Grid 中添加 SVG 控件 我可以使用 Javascript 添加 SVG 但页面的缩放 调整大小的行为并不像使用静态 HTML 构建的那样 单击 添加页面 按钮时 一组新的
  • 语法错误:未知:默认情况下不支持命名空间标签

    尝试将 svg 下载为 React 组件时出现以下错误 语法错误 未知 默认情况下不支持命名空间标签 React 的 JSX 不支持命名空间标签 您可以打开 throwIfNamespace 标志来绕过此警告 import React fr
  • 将 SVG 元素放置在图像上

    是否可以拥有以下元素并设置它们的样式 以便 SVG 对象出现在图像上 即像图像的一部分 目前它们显示在其下方的新行中 我知道我可以将图像设置为父 div 的背景图像 但不幸的是我还需要能够在父级内旋转它 所以我认为这不是一个选项 div s
  • 动画 SVG 在页面加载之前不会显示动画

    我的网站包含大量广告 加载需要一段时间 确切地说 这并不是一个问题 但我注意到任何 SVG 动画都会立即绘制第一帧 但动画只有在页面上的所有加载完成后才会出现 SVG 动画通常指示旋转器 加载图标 有没有办法立即启动SVG动画 或者如果我将
  • 在 Android 中使用矢量图像在真实设备上出现问题。 SVG-android

    I use svg android jar from https github com pents90 svg android其工作正常 但仅在 Eclipse 中的模拟器设备上 啊啊啊啊 在真实设备上它只是空的imageView在屏幕上
  • 可以在 d3.js 中使用具有固定圆圈大小的圆圈包布局吗?

    此圆形包布局示例 http bl ocks org 4063269 http bl ocks org 4063269 非常适合我正在从事的项目 但是它会调整所有圆圈相对于彼此的大小 有没有一种简单的方法来指定每个圆的固定半径 我已经搜索了源
  • 在 SVG 中绘制空心形状

    我想在 SVG 中绘制一个中心被挖空的形状 我问这个问题是为了画一个中间有一个圆的圆here https stackoverflow com questions 8193675 draw a hollow circle in svg 819
  • 文本输入框作为 SVG 中的“foreignObject” - 文本溢出问题

    我使用 foreignObject 标签在 svg 中有一个文本输入框 这很有效 但是如果您在输入框中输入的内容比其宽度长 从而导致其溢出 那么文本实际上会出现在页面上的其他位置 可能是没有外来对象标记的默认位置 这是一些屏幕截图来解释正在
  • 自 JRE 1.7.0_25 起,Batik 无法进行转换

    自从我更新到 JAVA 1 7 0 25 以来 蜡染在应用转换时会抛出异常 堆栈跟踪是 java awt image ImagingOpException Unable to transform src image at java awt
  • 使用 jspdf 将 Svg 渲染为 Pdf

    我在使用 jspdf 将 svg 元素渲染为 pdf 时遇到问题 我正在使用插件https github com CBiX svgToPdf js https github com CBiX svgToPdf js 去做这个 下面是我的代码
  • 使用velocity.js制作可拖动元素的动画

    我正在使用velocity js 为用户拖动的可拖动 SVG 元素设置动画 然而 velocity js 将先前的 mousemove 坐标排队并通过所有后续的 mousemove 坐标进行动画处理 我想要的是velocity js 不要对
  • 旋转嵌套 SVG

    我在用SVG js http svgjs com并尝试使用 SVG 进行一些操作 我以前使用过 canvas 但我对其生成的图像质量非常失望 因此我决定使用纯 SVG 我设法将所有内容都改为纯 SVG 方法 除了一件事 旋转 我无法让它发挥
  • 如何部分或仅按百分比沿路径过渡

    我是 d3 的初学者 目前无法使用最新版本 但我使用的是 3 x 版本 我想要实现的应该很简单 但遗憾的是我没有找到有关如何做到这一点的资源 目标是在我的 svg 中显示一条路径 然后我想显示例如一个圆并沿着路径过渡 移动 追踪圆 如果我想

随机推荐