html - 文本下方的 svg 图像（文本装饰）

问题描述

我想在两个单词下方和之间添加一个大括号的 SVG 图像，如下图所示。

由于我希望它具有响应性，因此我想将图像直接包含在 HTML 中两个单词之间的 span 标签中——但这只会在单词之间产生间隙（预期）。

最好的方法是什么？我希望有一种方法可以将图像添加到 text-decoration-style 属性。

如果之前有人问过这个问题，请原谅我——希望改进 html/css 的设计师

标签： htmlcss

在任何版本的纯 SVG 中都没有完美的方法来做到这一点。我将举例说明如何在 SVG 1.0 中实现逐个案例的解决方案，尽管该技术适用于 1.1 和 2.0 版本。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="512" height="256" viewBox="0 0 512 256">
    <g stroke="red">
        <!-- frame and center lines for reference -->
        <rect width="100%" height="100%" fill="white"/>
        <line x1="50%" x2="50%" y1="0%" y2="100%"/>
        <line x1="0%" x2="100%" y1="50%" y2="50%"/>
    </g>
    <text x="50%" y="50%" text-anchor="middle" font-size="500%" font-family="Sans-Serif">Hello world</text>
    <text x="50%" y="50%" font-size="500%" baseline-shift="-16" font-family="Sans-Serif" transform="rotate(90,256,128) translate(4,0)">}</text>
</svg>

其基本步骤如下。

将您的主要文本放在任何地方。
将您'}'的放在与主要文本相同的位置。text-anchor="start"但是，无论主文本的锚点如何，此文本都应具有（默认值）。
围绕其 x 和 y 基线旋转大括号文本。在示例中，这是按transform="rotate(90,256,128)".
baseline-shift通过更改其属性来更改大括号的水平位置。更负的值将大括号向左移动，而更正的值将其向右移动。
通过应用水平（令人困惑，我知道；垂直和水平是通过旋转切换）平移来更改大括号的垂直位置。您需要将大括号文本移低一点。为此，请积极翻译 x。在给定的示例中，大括号向下移动 4 个单位translate(4,0)。

就像我说的那样，这并不完美，每次创建新图像时都必须进行一些试验和错误。然而，一旦你做对了，结果将像你的图像的其余部分一样具有反应性和可扩展性。唯一重要的警告是，viewBox如果您打算更改widthor ，则必须设置该属性height，尽管无论如何您都应该这样做。

html - 文本下方的 svg 图像（文本装饰）

问题描述

解决方案

推荐阅读