如何在SVG中自动缩小文本? [英] How can I make text automatically scale down in an SVG?

问题描述

我有一个用Inkscape创建的SVG元素.然后，我将该SVG用作XSL-FO样式表的一部分，该样式表用于转换XML数据，然后通过IBEX渲染器创建pdf(通常随后将其打印).例如，我在svg/stylesheet中有如下所示的元素(由于Inkscape导出而产生了额外的噪音):

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>

我的问题在于我不知道该文本区域的大小.对于这个特定的对象，我在SVG中的文本右边有一个图像.但是，如果此字符串是W的最大允许数目，则它太长了，无法遍历图像.我想要的(在一个完美的世界中)是一种告诉它我希望文本块有多少像素宽，然后让它自动使文本变小直到适合该区域的一种方法.如果我不能这样做，则将文本截断也可以.作为最后的解决方法，我将使用固定宽度的字体并在XML生成中自己进行字符串截断，尽管这样做会造成可用性和美观性降低.

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.

我仔细阅读了SVG文档，并仔细研究了flowRegions和路径，但似乎都不是我想要的(也许是).如果有帮助，这是Inkscape生成的样式字符串:

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"

预先感谢您的帮助.

推荐答案

您有任意行长的文本(以字符为单位)，并且想要缩放它以适合固定的空间吗?我能想到的将文本重新缩放到固定大小的唯一方法是将其放置在svg元素内，然后将SVG缩放到该大小:

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>

但是，如上所述，封装svg元素上的viewBox需要设置为您可能不知道的文本宽度.

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.

如果要在具有可用脚本(例如Web浏览器)的用户代理中引用此SVG，则可以轻松编写脚本以捕获text

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.

这篇关于如何在SVG中自动缩小文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！