如何访问或翻译Vector Drawables中的文本

I have a custom view which displays a drawable and detects touches. It has a number of drawable layers, some of which contain text, for example,

我有一个自定义视图，显示一个drawable并检测触摸。它有许多可绘制的层，其中一些包含文本，例如，

I have converted each SVG vector graphic into a vector drawable and want to be able to set the text to be a resource so I can substitute different translations.

我已将每个SVG矢量图形转换为可绘制的矢量，并希望能够将文本设置为资源，以便我可以替换不同的翻译。

The SVG xml code for the 'Hello box' above :-

上面'Hello box'的SVG xml代码： -

<svg
   width="800"
   height="400"
   viewBox="0 0 800 400.00001"
   id="svg5772"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="HELLO in a box.svg">
  <defs
     id="defs5774" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
    <rect
       style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       id="rect6320"
       width="468.57144"
       height="128.57143"
       x="174.28572"
       y="786.64795"
       rx="0"
       ry="0" />
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       x="348.57141"
       y="869.50507"
       id="text6322"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan6324"
         x="348.57141"
         y="869.50507">HELLO!!!</tspan></text>
  </g>
</svg>

...converts to this vector drawable xml :-

...转换为此向量drawable xml： -

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:viewportWidth="800"
    android:viewportHeight="400"
    android:width="800dp"
    android:height="400dp">
    <group
        android:translateY="-652.3621">
        <path
            android:pathData="M174.28572 786.64795l468.57144 0 0 128.57143 -468.57144 0z"
            android:strokeWidth="2"
            android:fillColor="#ffffff"
            android:strokeLineJoin="round"
            android:strokeLineCap="round"
            android:strokeMiterLimit="4"
            android:strokeColor="#000000" />
        <path
            android:pathData="M374.72375 869.50507l-3.86718 0 0 -14.23829 -14.51172 0 0 14.23829 -3.86719 0 0 -29.08204 3.86719 0 0 11.40625 14.51172 0 0 -11.40625 3.86718 0 0 29.08204z"
            android:strokeLineCap="butt"
            android:fillColor="#000000"
            android:strokeLineJoin="miter" />
        <path
            android:pathData="M401.71594 869.50507l-19.16015 0 0 -29.08204 19.16015 0 0 3.4375 -15.29297 0 0 7.96875 15.29297 0 0 3.4375 -15.29297 0 0 10.80079 15.29297 0 0 3.4375z"
            android:strokeLineCap="butt"
            android:fillColor="#000000"
            android:strokeLineJoin="miter" />
        <path
            android:pathData="M426.26672 869.50507l-18.39843 0 0 -29.08204 3.86718 0 0 25.64454 14.53125 0 0 3.4375z"
            android:strokeLineCap="butt"
            android:fillColor="#000000"
            android:strokeLineJoin="miter" />
        <path
            android:pathData="M448.53235 869.50507l-18.39844 0 0 -29.08204 3.86719 0 0 25.64454 14.53125 0 0 3.4375z"
            android:strokeLineCap="butt"
            android:fillColor="#000000"
            android:strokeLineJoin="miter" />
        <path
            android:pathData="M473.6886 843.76288q1.77734 1.95312 2.71484 4.78515 0.95703 2.83204 0.95703 6.42579 0 3.59375 -0.97656 6.44531 -0.95703 2.83203 -2.69531 4.72656 -1.79688 1.97266 -4.25781 2.96875 -2.44141 0.99609 -5.58594 0.99609 -3.06641 0 -5.58594 -1.01562 -2.5 -1.01563 -4.25781 -2.94922 -1.75781 -1.93359 -2.71485 -4.74609 -0.9375 -2.8125 -0.9375 -6.42578 0 -3.55469 0.9375 -6.36719 0.9375 -2.83203 2.73438 -4.84375 1.71875 -1.91406 4.25781 -2.92969 2.5586 -1.01562 5.56641 -1.01562 3.125 0 5.60547 1.03515 2.5 1.01563 4.23828 2.91016zm-0.35156 11.21094q0 -5.66407 -2.53907 -8.73047 -2.53906 -3.08594 -6.93359 -3.08594 -4.43359 0 -6.97266 3.08594 -2.51953 3.0664 -2.51953 8.73047 0 5.72265 2.57813 8.76953 2.57812 3.02734 6.91406 3.02734 4.33594 0 6.89453 -3.02734 2.57813 -3.04688 2.57813 -8.76953z"
            android:strokeLineCap="butt"
            android:fillColor="#000000"
            android:strokeLineJoin="miter" />
        <path
            android:pathData="M489.64563 840.42303l-0.50781 21.07422 -3.32032 0 -0.54687 -21.07422 4.375 0zm-0.19531 29.08204l-3.98438 0 0 -4.1211 3.98438 0 0 4.1211z"
            android:strokeLineCap="butt"
            android:fillColor="#000000"
            android:strokeLineJoin="miter" />
        <path
            android:pathData="M505.42688 840.42303l-0.50781 21.07422 -3.32032 0 -0.54687 -21.07422 4.375 0zm-0.19531 29.08204l-3.98438 0 0 -4.1211 3.98438 0 0 4.1211z"
            android:strokeLineCap="butt"
            android:fillColor="#000000"
            android:strokeLineJoin="miter" />
        <path
            android:pathData="M521.20813 840.42303l-0.50781 21.07422 -3.32032 0 -0.54687 -21.07422 4.375 0zm-0.19531 29.08204l-3.98438 0 0 -4.1211 3.98438 0 0 4.1211z"
            android:strokeLineCap="butt"
            android:fillColor="#000000"
            android:strokeLineJoin="miter" />
    </group>
</vector>

It looks very much like each letter of "HELLO!!!" text is converted into a path to be drawn directly to the canvas?!

它看起来非常像每个“HELLO !!!”的字母文本被转换为直接绘制到画布的路径？！

So my question is, is there alternative way of displaying the vector graphic containing text on a canvas and therefore being able to use a resource for the text part? or am I stuck with creating different graphics for each language?

所以我的问题是，是否有另一种方法可以在画布上显示包含文本的矢量图形，从而能够将资源用于文本部分？还是我坚持为每种语言创建不同的图形？

2 个解决方案

#1

Your conclusion is right.

你的结论是对的。

Vector drawables are completely path based. This is the underlying reason for their animation because only a path is being changed. Hence they don't take text or image as input.

矢量drawables完全基于路径。这是他们动画的根本原因，因为只有路径被改变。因此，他们不会将文本或图像作为输入。

An option might be getting .svg through text(Some tool maybe?) and then convert it to xml for each language. If you are targeting larger localization, vector drawable may not be the right approach.

一个选项可能是通过文本获取.svg（某些工具可能？）然后将其转换为每种语言的xml。如果您的目标是更大的本地化，那么矢量绘图可能不是正确的方法。

#2

You are going to have to use an approach that separates the localizable content from the drawable.

您将不得不使用将可本地化内容与可绘制内容分开的方法。

It's not clear what exactly you are doing, but if for example you want to have custom buttons, then you should make the VectorDrawable just be the custom button design. Then either use the drawable as a background to a TextView, or superimpose the text part as a TextView on top of an ImageView.

目前尚不清楚你到底在做什么，但是如果你想要自定义按钮，那么你应该让VectorDrawable成为自定义按钮设计。然后使用drawable作为TextView的背景，或者将文本部分作为TextView叠加在ImageView的顶部。

#1