Question

我正在尝试动态地将文字添加到我在页面上显示的每个图像的左上角，其中包含作者的姓名和上传日期。这是一个粗略的例子：

我需要使用SVG添加此文本，并且我无法修改父svg标记。现在，我这样做：

<g class="mytext" transform="translate(0, 20)">
  <text class="author">
    <tspan class="header" x="0">AUTHOR</tspan>
    <tspan class="content" x="0" dy="2em">Me</tspan>
  </text>
</g>
<g class="mytext" transform="translate(170, 20)">
  <text class="date">
    <tspan class="header" x="0">DATE</tspan>
    <tspan class="content" x="0" dy="2em">December 21, 2015</tspan>
  </text>
</g>

jsFiddle

然而，这种方法存在一些问题：

我不确定如何处理作者姓名的长度。很长的名字很容易碰到日期条目：处理这个问题的最佳做法是什么（我的意思是“设计”方式和“程序化”方式）。
页面上有一个“查看大图”按钮，可以为图像设置较大的宽度和高度。如何让我的文本自动调整大小，使其大小相同（相对）;也就是说，覆盖了完全相同的图像百分比？

我理想地寻找一种方法来尽可能少干涉我（因此浏览器/ SVG负责缩放/文本截止）。但是，我上面提到的问题是，我无法修改父svg标签（所以我不能使用viewBox或类似的）。

有没有办法解决这两个问题，没有JS代码挂钩到每个图像调整大小并动态设置字体大小？

缩放图像左上角的SVG文本

0 个答案: