主页 / 问题 / 819657
Accepted
user33274
Asked:2020-04-26 18:43:38 +0000 UTC2020-04-26 18:43:38 +0000 UTC

如何实现文本跟随对象移动的外观？

  • 772

原始问题：https ://toster.ru/q/525769 注意：该问题已被 toster.ru 版主删除

与往常一样，这个问题的不寻常之处令我感兴趣，我将附上一个布局 在此处输入图像描述

开始SVG并得到了这个：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="400px" height="400px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Red Hot Chilli Peppers Logo</title>
<defs>
<path id="a" d="m243.2 382.4c-74.8 0-135.5-60.7-135.5-135.5s60.7-135.5 135.5-135.5 135.5 60.7 135.5 135.5-60.7 135.5-135.5 135.5z"/>
<style>text { 
 font-size: 16px;
 font-family: helvetica;
 font-weight: 900; 
 text-transform: uppercase;
 letter-spacing: 17px;
 }</style>
</defs>
<text dy="20" textLength="1200">
<textPath xlink:href="#a">Red Hot Chilli Peppers</textPath>
</text>
</svg>

如何实现问题开头图片中文字逐渐出现的效果？

html

1 个回答

  1. Best Answer

    简短的回答

    使用三层来实现铭文外观的效果：

    • 沿path半圆 运行的静态文本
    • 上面用来遮盖文字，有一个带有背景色的补丁
    • 抹去遮罩贴片的动画遮罩
      加上一个随遮罩移动的彩色圆圈 

    text { 
 font-size: 18px;
 font-family: serif;
 font-weight: 900; 
 text-transform: uppercase; 
fill:#535353; 
 }
 .container {
 width:50%;
 height:50%;
 }
    <div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 400 400" >
  <defs>
  <mask id="mask1" maskUnits="userSpaceOnUse">
      <path  fill="none" stroke="white" stroke-width="35" stroke-dasharray="393" stroke-dashoffset="393" d="M 100, 200  m -75, 0  a 75,75 0 1,1 250,0" >
	  <animate attributeName="stroke-dashoffset" dur="5s" values="0;-393" fill="freeze" /> 
	  </path>
  </mask>
  <path id="Crc" fill="none" stroke="white" stroke-width="30"  d="M 100, 200  m -75, 0  a 75,75 0 1,1 250,0" />
    <filter id="hole-blur" x="-20%" y="-20%" width="180%" height="180%" >
      <feGaussianBlur stdDeviation="5">
     <animate  attributeName="stdDeviation" dur="1.25s" values="2;5;5;5;3;2" repeatCount="indefinite" />
	 </feGaussianBlur>
	</filter>
  </defs>
  <image xlink:href="https://isstatic.askoverflow.dev/1REYQ.png" transform="translate(0 10)" width="300px" height="300px" />
   <text dy="0" textLength="100%" letter-spacing="4.8" >
<textPath xlink:href="#Crc"   startOffset="0%" >S o l u t i o n s  &  c o n s u l t
 </textPath>  
 </text> 
  <path class="clef dot"   d="M 100, 200  m -75, 0  a 75,75 0 1,1 250,0" stroke="white" stroke-width="35" mask="url(#mask1)" >
  </path>
   <circle cx="0" cy="3" r="12" fill="#00F1F5" filter="url(#hole-blur)" >
 <animateMotion
   id="an" dur="5s"
   repeatCount="1"
   rotate="auto-reverse"
   begin="0s"
   fill="freeze"
   restart="whenNotActive">
   <mpath xlink:href="#Crc"/>
</animateMotion>
</circle>	
</svg> 
</div>

    详细地

    • 文本位于path半圆 
         <text dy="0" textLength="100%" letter-spacing="4.8" >
    <textPath xlink:href="#Crc"   startOffset="0%" >S o l u t i o n s  &  c o n s u l t  </textPath>

    对于跨浏览器解决方案，我必须寻找选项，以便字母之间的填充和间距相同：textLength="100%" letter-spacing="4.8"

    • 顶部遮罩文本，path以背景颜色定位
     <path id="Crc" fill="none" stroke="white" stroke-width="30"  d="M 100, 200  m -75, 0  a 75,75 0 1,1 250,0" />`

    补丁具有半圆弧的形状，其宽度stroke-width="30"与文本完全重叠

    • 擦除遮罩补丁的动画遮罩 
     <mask id="mask1" maskUnits="userSpaceOnUse">
      <path  fill="none" stroke="white" stroke-width="35" stroke-dasharray="393" stroke-dashoffset="393" d="M 100, 200  m -75, 0  a 75,75 0 1,1 250,0" >
      <animate attributeName="stroke-dashoffset" dur="5s" values="0;-393" fill="freeze" /> 
      </path>
  </mask>

    蒙版与蒙版具有相同的形状path，蒙path版属性stroke="white"使蒙版透明path。蒙版移动的动画效果是通过改变属性来实现的stroke-dashoffset

    • 随面具移动的彩色圆圈

    沿与蒙版相同的路径移动。阴影模糊效果 - 高斯滤镜

     <filter id="hole-blur" x="-20%" y="-20%" width="180%" height="180%" >
      <feGaussianBlur stdDeviation="5">
     <animate  attributeName="stdDeviation" dur="1.25s" values="2;5;5;5;3;2" repeatCount="indefinite" />
     </feGaussianBlur>
    </filter>

    增加、减少圆的模糊动画是通过改变属性来实现的stdDeviation

    1. 该示例适用于所有现代浏览器，除了IE根据定义不能使用动画的浏览器。
    2. 该示例是响应式的
    3. 您可以为您的项目创建类似的应用程序，只更改文本和图片。

    现场演示

    带有不同图片的示例

    文字已更改，有必要调整图像的大小及其位置

    <image xlink:href="https://isstatic.askoverflow.dev/1zUoo.png" transform="translate(20 85)" width="250px" height="250px" />


    text { 
 font-size: 18px;
 font-family: serif;
 font-weight: 900; 
 text-transform: uppercase; 
fill:black; 
 }
 .container {
 width:50%;
 height:50%;
 }
    <div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 400 400" >
  <defs>
  <mask id="mask1" maskUnits="userSpaceOnUse">
      <path  fill="none" stroke="white" stroke-width="35" stroke-dasharray="393" stroke-dashoffset="393" d="M 100, 200  m -75, 0  a 75,75 0 1,1 250,0" >
	  <animate attributeName="stroke-dashoffset" dur="5s" values="0;-393" fill="freeze" /> 
	  </path>
  </mask>
  <path id="Crc" fill="none" stroke="white" stroke-width="30"  d="M 100, 200  m -75, 0  a 75,75 0 1,1 250,0" />
    <filter id="hole-blur" x="-20%" y="-20%" width="180%" height="180%" >
      <feGaussianBlur stdDeviation="5">
     <animate  attributeName="stdDeviation" dur="1.25s" values="2;5;5;5;3;2" repeatCount="indefinite" />
	 </feGaussianBlur>
	</filter>
  </defs>
  <image xlink:href="https://isstatic.askoverflow.dev/1zUoo.png" transform="translate(20 85)" width="250px" height="250px" />
   <text dy="0" textLength="100%" letter-spacing="4.8" >
<textPath xlink:href="#Crc"   startOffset="0%" >Our club come &  c o n s u l t
 </textPath>  
 </text> 
  <path class="clef dot"   d="M 100, 200  m -75, 0  a 75,75 0 1,1 250,0" stroke="white" stroke-width="35" mask="url(#mask1)" >
  </path>
   <circle cx="0" cy="3" r="12" fill="#03ABF3" filter="url(#hole-blur)" >
 <animateMotion
   id="an"
   dur="5s"
   repeatCount="1"
   rotate="auto-reverse"
   begin="0s"
   fill="freeze"
   restart="whenNotActive">
     <mpath xlink:href="#Crc"/>
 </animateMotion>
</circle>	
</svg> 
</div>

    • 9

相关问题