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

Question

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

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

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

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

Answer 1

您可以将大括号的 padding-top 和 bottom 设置为负值。但我不确定这是否是最好的方法。

Answer 2

在任何版本的纯 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>

基本步骤如下。

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

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

Answer 3

我用 CSS 和 after 伪元素创建了一些东西。请检查这是否适合您。您还可以使用图像/svg 背景，如下面的第二个示例所示。

.bg {
  position: relative;
  display: inline-block;
}

.bg:after {
  position: absolute;
  bottom: -20px;
  content: "{";
  left: 10px;
  display: inline-block;
  transform: rotate(270deg);
  color:red;
}

<h1>Produc<span class="bg">t D</span>esigner</h1>

以下示例使用背景图像。您可以将其替换为 SVG。

.bg {
  position: relative;
  display: inline-block;
}

.bg:after {
  position: absolute;
  bottom: -20px;
  width: 38px;
  height: 25px;
  content: ' ';
  background-image: url('https://i.stack.imgur.com/Z2tKv.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  left: 3px;
  display: inline-block;
}

<h1>This example is using a background image
  <h1>

    <h1>I am a Produc<span class="bg">t D</span>esigner</h1>

Answer 4

有一个无需使用 SVG 的解决方案。你能把每个单词都用 span 包裹起来吗？ 如果是这样，那么您需要做的就是：

span {
  position: relative; /* for curly brace positioning */
}
span:first-child::after {
  content: " "; /* space after the first word */
}
span:first-child::before {
  position: absolute;
  right: 0;
  bottom: 0;
  transform-origin: bottom right;
  transform: rotate(-90deg) translateY(40%);
  content: "{";
}

要将花括号移近/远离标题，请在转换中使用额外的 translateX(#)，例如：

transform: rotate(-90deg) translateY(40%) translateX(-5px);

检查代码段 here（为了视觉清晰，我添加了边框）。

编辑：关于大括号更精细的水平定位，正如下面提到的威廉·罗森布鲁姆，您可以使用 baseline-shift 代替 translateY()。