如何使 SVG 中的文本自动缩小？

发布于 2024-10-27 19:58:44 字数 1111 浏览 7 评论 0原文

我有一个使用 Inkscape 创建的 SVG 元素。然后，我将该 SVG 放入 XSL-FO 样式表中，该样式表用于转换 XML 数据，然后通过 IBEX 渲染器创建 pdf（通常会打印出来）。举个例子，我在 svg/stylesheet 中的元素看起来像这样（由于 Inkscape 导出而产生额外噪音）：

<text x="114" x="278.36218" id="id1" xml:space="preserve" style="big-long-style-string-from-inkscape">
    <tspan x="114" y="278.36218" id="id2" style="style-string">
        <xsl:value-of select="Alias1"/>
    </tspan>
</text>

我的问题在于我不知道这个文本区域有多大。对于这个特定的图像，我在 SVG 中的文本右侧有一张图像。但是，如果该字符串是 W 的最大允许数量，则它太长并且会超出图像。我想要的（在完美的世界中）是一种告诉它我想要文本块有多少像素宽的方法，然后让它自动使文本变小，直到它适合该区域。如果我做不到这一点，截断文本也可以。作为最后的手段，我将使用固定宽度字体并在 XML 生成中自行进行字符串截断，尽管这会产生一些不太实用且不太美观的东西。

我浏览了 SVG 文档并研究了一些 flowRegions 以及路径，但似乎都不是我想要的（也许它们确实是）。如果有帮助，这里是 Inkscape 生成的样式字符串：

"font-size:20px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans"

提前感谢您的帮助。

原文

I've got an SVG element that I've created with Inkscape. I then take that SVG and put in as part of an XSL-FO stylesheet that is used to transform XML data and then passed through the IBEX renderer to create a pdf (which is usually then printed). As an example, I have elements in the svg/stylesheet that look like this (extra noise due to the Inkscape export):

<text x="114" x="278.36218" id="id1" xml:space="preserve" style="big-long-style-string-from-inkscape">
    <tspan x="114" y="278.36218" id="id2" style="style-string">
        <xsl:value-of select="Alias1"/>
    </tspan>
</text>

My problem lies in the fact that I don't know how big this text area is going to be. For this particular one, I've got an image to the right of the text in the SVG. However, if this string is the maximum allowed number of W's, it's way too long and goes over the image. What I'd like (in a perfect world) is a way to tell it how many pixels wide I want the text block to be and then have it automatically make the text smaller until it fits in that area. If I can't do that, truncating the text would also work. As a last ditch resort, I'm going to use a fixed width font and do the string truncation myself in the XML generation, although that creates something both less usable and less pretty.

I've poked around the SVG documentation and looked into flowRegions a bit as well as paths, but neither seem to be be quite what I want (maybe they are though). If it helps, here's that style string that Inkscape generates:

"font-size:20px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans"

Thanks in advance for the help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

A君 2024-11-03 19:58:44

您有任意行长度（以字符计）的文本，并且您想要缩放它以适合固定的空间量？我能想到的将文本重新缩放到固定大小的唯一方法是将其放置在 svg 元素内，然后将 SVG 缩放到该大小：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Resizing Text</title>
  <defs>
    <svg id="text-1" viewBox="0 0 350 20">
      <text id="text-2" x="0" y="0" fill="#000" alignment-baseline="before-edge">It's the end of the world as we know it, and I feel fine!</text>
    </svg>
  </defs>
  <rect x="500" y="100" width="200" height="40" fill="#eee" />
  <use  x="510" y="110" width="180" height="20" xlink:href="#text-1" />
</svg>

但是，如上所示，viewBox<封装 svg 元素上的 /code> 需要设置为文本的宽度，您可能不知道这一点。

如果您在具有可用脚本的用户代理（例如网络浏览器）中引用此 SVG，那么您可以轻松编写脚本来捕获 text 或 tspan 元素并设置 viewBox相应地。

You have text of arbitrary line length (in terms of characters) and you want to scale it to fit inside a fixed amount of space? The only way I can think of to rescale text to a fixed size is to place it inside an svg element and then scale the SVG to that size:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Resizing Text</title>
  <defs>
    <svg id="text-1" viewBox="0 0 350 20">
      <text id="text-2" x="0" y="0" fill="#000" alignment-baseline="before-edge">It's the end of the world as we know it, and I feel fine!</text>
    </svg>
  </defs>
  <rect x="500" y="100" width="200" height="40" fill="#eee" />
  <use  x="510" y="110" width="180" height="20" xlink:href="#text-1" />
</svg>

However, as seen above, the viewBox on the encapsulating svg element needs to be set to the width of the text, which you presumably don't know.

If you're referencing this SVG inside a user agent with scripting available (e.g. a web browser) then you could easily write a script to capture the width of the text or tspan element and set the viewBox accordingly.

回复收藏 0 原文

~没有更多了~