考虑一下an SVG image with text个.有没有可能使用image标签(或任何其他标签)将其嵌入到一个HTML文档中,并将文本保留为文本,这样就可以 Select 或搜索它,例如使用"Control+Find"?

普通的image标记不能做到这一点:

<image src="https://www.w3.org/TR/SVG11/images/text/toap04.svg"></image>

推荐答案

在嵌入带有可选文本的SVG时,您有几个 Select .

内联SVG

您可以使用<svg>标签在HTML文档中嵌入内联SVG.

    <svg width="453px" height="136px" viewBox="0 0 1000 300">
  <defs>
    <path id="MyPath" d="M 100 125 
                 C 150 125 250 175 300 175
                 C 350 175 450 125 500 125
                 C 550 125 650 175 700 175
                 C 750 175 850 125 900 125" />
  </defs>
  <use xlink:href="#MyPath" fill="none" stroke="red" />
  <text font-family="Verdana" font-size="60" fill="blue" letter-spacing="2">
    <textPath xlink:href="#MyPath">
      Choose shame or get war
    </textPath>
  </text>
  <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" />
</svg>

<object> tag

当链接到外部SVG时,也可以使用<object>标签.

<object data="https://www.w3.org/TR/SVG11/images/text/toap04.svg" width="453" height="136"></object>

Html相关问答推荐

从收件箱获取内部HTML值

当ul为Flex时,使ul元素在指定高度内可垂直滚动

新用户登录时无法从cookie中获取当前用户信息

在元素之间添加空格

将输入字段下方的两个按钮设置为两侧对齐

如何在div中淡入和淡出渐变背景?

如何在用css使用网格视图时设置宽度?

防止position:relative的child在出界时收缩

如何用背景色填充边框半径创建的间隙

如何使背景图像在面包屑中相互重叠

HTML,CSS-阻止按钮在单击时向上移动

Tailwind CSS 忽略我的元素的填充

如何从通过 find-each 方法(在 Rails 应用程序中)生成的列表创建下拉菜单?

按钮位于主 div 的底部而不是内部 Div

在 flexbox 中使用 spacer 是否有效

Google Apps 脚本 - RegEx 适用于小文本,但不适用于大文件?

SVG 调整大小而不是溢出

为什么相同持续时间的转换需要不同的时间?

在部分而不是正文中定义页面宽度

两个按钮范围滑块的 CSS