主页 / 问题 / 803801
Accepted
Arthur
Asked:2020-03-24 04:47:12 +0000 UTC2020-03-24 04:47:12 +0000 UTC

样式化和动画 SVG 文本

  • 772

我想看一些文本样式的示例以及如何将pattern&mask与一些效果结合使用。

1. “爬虫”笔画（linearGradient& animate）：

在此处输入图像描述

2.
用对角线（pattern& mask）从自身投射阴影的文本：

在此处输入图像描述

3.用水填充文本（SVG( pattern& mask) & CSS( @keyframes)）：

在此处输入图像描述

PS在这个问题中，有一些来自开放访问（2和3）的例子。创建这个问题是为了吸引SVG和展示它的能力。

html

2 个回答

  1. 我们将逐渐考虑并创建类似的示例。

    第一个例子

    1. 我们将文本放入<symbol></symbol>.

    元素<symbol>用于定义该元素可以创建的图形模板对象。<use>

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="400">
  <symbol id="text">
    <text font-size="5em" text-anchor="middle" x="160" y="55">Some text</text>
  </symbol>
  <use xlink:href="#text"/>
</svg>

    1. 我们用做一个任意的渐变<linearGradient></linearGradient>，我想这里一切都清楚了，它可以连接到画布的各种元素。在这个例子中，我们用渐变“填充”了文本的背景，但这并不是它所能做的全部。我们可以应用渐变，stroke而不仅仅是。

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="400">
  <symbol id="text">
    <text font-size="5em" text-anchor="middle" x="160" y="55">Some text</text>
  </symbol>
  <linearGradient id="grad">
    <stop offset="0%" stop-color="red"/>
    <stop offset="50%" stop-color="black"/>
    <stop offset="100%" stop-color="blue"/>
  </linearGradient>
  <use xlink:href="#text" fill="url(#grad)"/>
</svg>

    1. “让我们画出”文本的轮廓。让我们也尝试使用 更改stroke-dashoffset属性<animate/>。

    该属性定义相对于起始位置stroke-dashoffset的偏移量stroke

    一个属性stroke-dasharray有 2 个或更多值。第一个值定义行的长度，第二个定义行之间的间距。

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="100">
  <symbol id="text">
    <text text-anchor="middle" x="160" y="55">Some text</text>
  </symbol>
  <linearGradient id="grad">
    <stop offset="0%" stop-color="red"/>
    <stop offset="60%" stop-color="black"/>
    <stop offset="100%" stop-color="blue"/>
  </linearGradient>
  <use xlink:href="#text" stroke-dashoffset="0" stroke-dasharray="10 15" fill="none" stroke-width="3" stroke="url(#grad)" font-size="5em">
    <animate attributeName="stroke-dashoffset" values="250;0" dur="7s" repeatCount="indefinite"/>
  </use>
</svg>

    1. 您可以进行最“毛毛虫”的效果。我们必须在文本上覆盖文本并更改stroke-dashoffset&属性stroke-dasharray。

      第一个示例已准备就绪：

    @import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Open Sans;
  text-transform: uppercase;
  letter-spacing: 5px;
}
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/2000/svg" version="1.1">
  <symbol id="stroke-dash">
    <text text-anchor="middle" x="50%" y="50%">Stroke</text>
  </symbol>
  <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#05a"/>
    <stop offset="100%" stop-color="#0a5"/>
  </linearGradient>
  <use xlink:href="#stroke-dash" stroke="url(#linear)" stroke-dasharray="10 1" stroke-width="3" stroke-dashoffset="0" font-size="4em">
    <animate attributeName="stroke-dashoffset" values="250;0" dur="15s" repeatCount="indefinite"/>
  </use>
  <use xlink:href="#stroke-dash" stroke="url(#linear)" stroke-dasharray="10 15" stroke-width="3" stroke-dashoffset="0" font-size="4em">
    <animate attributeName="stroke-dashoffset" values="250;0" dur="15s" repeatCount="indefinite"/>
  </use>
</svg>

    第二个例子

    PS在这个例子中，我们来看看pattern& mask。

    1. 让我们尝试pattern在任何正方形上使用它，用圆圈填充它：

    pattern可以用作各种元素的填充或描边，无论是文本、形状还是图像。

    <link href='https://fonts.googleapis.com/css?family=Cabin+Condensed:700' rel='stylesheet' type='text/css'>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <defs>
    <pattern id="pattern" width="10" height="10" patternUnits="userSpaceOnUse">
      <circle id="circle" cx="5" cy="5" r="5" fill="#000"/>
    </pattern>
  </defs>
  <rect x="0" y="0" width="250" height="250" fill="url(#pattern)"/>
</svg>

    1. 现在让我们试试pattern& mask。

    mask在我们的上下文中是隐藏一些内容的表面层。

    .stripes {
  width: 100px;
  height: 50px;
  mask: url("#mask");
}

.red {
  fill: red;
}

.blue {
  fill: blue;
}
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/2000/svg" version="1.1" height="150" width="150">
  <defs>
    <pattern id="strokeEffect" width="1" height="3" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
      <rect x="0" y="0" width="1" height="1" fill="#fff"/>
    </pattern>
    <mask id="mask">
      <rect height="100%" width="100%" style="fill: url(#strokeEffect)"/>
    </mask>
  </defs>
  <rect class="stripes red" y="0"/>
  <rect class="stripes" y="50"/>
  <rect class="stripes blue" y="100"/>
</svg>

    1. 让我们使用上面的方法重新创建第二个示例。

      第二个例子准备好了：

    body {
  background-color: #2e2e2e;
}
    <link href='https://fonts.googleapis.com/css?family=Cabin+Condensed:700' rel='stylesheet' type='text/css'>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="620" height="500">
  <defs>
    <pattern id="strokeEffect" width="1" height="3" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
      <rect x="0" y="0" width="1" height=".8" fill="#ffffff"/>
    </pattern>
    <text id="text" x="250" y="100" font-size="5em" text-anchor="middle" letter-spacing="15" font-family="'Cabin Condensed'">Some text</text>
    <mask id="mask">
      <rect x="0" y="0" width="100%" height="100%" fill="#fff"/>
      <use x="-6" y="-6" stroke="#000" stroke-width="5" xlink:href="#text" opacity="1" fill="#000"/>
    </mask>
  </defs>
  <use x="6" y="6" xlink:href="#text" opacity="1" fill="url(#strokeEffect)" mask="url(#mask)"/> 
  <use x="0" y="0" xlink:href="#text" fill="#fff"/>
</svg>

    第三个例子

    1. 我们先来看代码：

    body {
  background: #141414;
  text-align: center;
}

.water-fill {
  -webkit-animation: wave 0.7s infinite linear, fill-up 10s infinite ease-out alternate;
  animation: wave 0.7s infinite linear, fill-up 10s infinite ease-out alternate;
}

@-webkit-keyframes wave {
  0% {
    x: -400px;
  }
  100% {
    x: 0;
  }
}

@keyframes wave {
  0% {
    x: -400px;
  }
  100% {
    x: 0;
  }
}

@-webkit-keyframes fill-up {
  0% {
    height: 0;
    y: 130px;
  }
  100% {
    height: 160px;
    y: -30px;
  }
}

@keyframes fill-up {
  0% {
    height: 0;
    y: 130px;
  }
  100% {
    height: 160px;
    y: -30px;
  }
}
    <link href='https://fonts.googleapis.com/css?family=Cabin+Condensed:700' rel='stylesheet' type='text/css'>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="575px" height="120px" viewBox="0 0 575 120" xml:space="preserve">
  <defs>
    <pattern id="water" width=".25" height="1.1" patternContentUnits="objectBoundingBox">
      <path fill="white" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"/>
    </pattern>
    <text id="text" transform="matrix(1 0 0 1 -8 117)" font-family="'Cabin Condensed'" font-size="161">LOADING</text>
    <mask id="text_mask">
      <use xlink:href="#text" fill="white"/>
    </mask>
  </defs>
<rect class="water-fill" mask="url(#text_mask)" fill="url(#water)" width="1600" height="120"/>
</svg>

    1. 我们得出结论:)

      2.1。pattern沿轴有偏移X。

      2.2. 波浪效应的发生是由于宽度rect，它等于从到1600沿轴的负偏移。我们可以做实验，也就是改变数值，看看会发生什么：X-4000

      PS结果并不令人印象深刻，我想你知道为什么会这样了。如果不是，那么这是简短的答案：我们制作rect，而它pattern“调整”到那个宽度，然后我们rect偏移X.

      2.3. 接下来，我们将它粘贴进去mask，瞧，文本的波浪效果就准备好了:)

    .water-fill {
  animation: wave 0.7s infinite linear, fill-up 10s ease-out alternate;
}

@keyframes wave {
  0% {
      /*New*/
    x: -200px;
  }
  100% {
    x: 0;
  }
}

@keyframes fill-up {
  0% {
    y: 120px;
    height: 0;
  }
  100% {
    y: 0;
    height: 120px;
  }
}
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="water" width="0.25" height="1" patternContentUnits="objectBoundingBox">
      <path fill="dodgerblue" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"/>
    </pattern>
  </defs>	
  <!--New (width)-->
  <rect class="water-fill" fill="url(#water)" width="400" height="120"/>
</svg>

    • 11
  2. Best Answer

    向位图中添加和设置 svg 文本样式

    您需要以对话、漫画的风格将文本添加到现有位图。
    同时，图像和文本需要自适应，即在调整大小时保持它们的相对位置。

    在此处输入图像描述

    分步说明：

    • 将位图添加到SVG

    <image xlink:href="https://isstatic.askoverflow.dev/6HVU6.jpg" width="400" height="300"/>

    • 我们在矢量编辑器中绘制文本所在的轮廓

      <path d="M350 280a400 400 0 0 0 4 -150a100 60 0 1 0 -14 4a400 400 0 0 1 10 146z"/>

    • 在大纲内添加文本。不幸的是，svg没有自动文本换行，如HTML，但有可能使用该属性进行手动文本换行<tspan>

    • 如有必要，我们会对容器的大小、位置和文本进行更精细的调整

      <g transform="scale(1.1) translate(-40 0)" >

    svg {
  width: 40%;
  height: 40%;
}

text {
  font-family: Lobster;
  font-size: 24px;
  text-anchor: middle;
  fill: #474447;
}

path {
  fill: #fff;
  stroke: #474447;
  stroke-width: 2;
}
    <link href='https://fonts.googleapis.com/css?family=Lobster|Raleway' rel='stylesheet' type='text/css'>
<link href="google-font.css" rel="stylesheet" type="text/css">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 300" preserveAspectRatio="xMinYMin meet">
  <image xlink:href="https://isstatic.askoverflow.dev/6HVU6.jpg" width="400" height="300"/>
  <g transform="scale(1.1) translate(-40 0)">
    <path stroke-miterlimit="50" d="M350 280a400 400 0 0 0 4 -150a100 60 0 1 0 -14 4a400 400 0 0 1 10 146z"/>
    <text>
      <tspan x="302" y="60">Вы вызываете</tspan>
      <tspan x="302" y="85">больше проблем,</tspan>
      <tspan x="302" y="110">чем пользы.</tspan>
    </text> 
  </g>
</svg>

    图像和文本是响应式的。
    适用于所有现代浏览器 + IE11、Edge

    • 10

相关问题