css 弧形文本-svg

最新推荐文章于 2024-08-20 15:02:44 发布

蜗牛前端

最新推荐文章于 2024-08-20 15:02:44 发布

阅读量3.6k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_21113235/article/details/90236674

版权

<!DOCTYPE html>
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title>
    <style type="text/css">
      body{
        background: #000;
      }

     /* svg{
        width: 1000px;
        height: 500px;
      }*/
      path {
        fill: #4682B4;
      }
      text {
            stroke: #fff;
            stroke-width: 1;
            font-size: 20px
           
      }
      svg text {
          fill: #fff;/* 文字颜色 */
          stroke: #f7f9fb6b;/* 文字边框颜色 */
          stroke-width: 3;/* 边框宽度 */
          text-anchor: middle;  /* 文本水平居中 */
          /*dominant-baseline: middle; /* 文本垂直居中 */*/
        }
    </style> 
  </head> 
  <body>
      <svg viewBox="0 0 1000 500">
        <defs>
          <path id="MyPath"
            d="M 10,150
              C 150 170 220 240 1000 160
              M 10,150
              " />
        </defs>
        <!-- Show line of the viewport red-->
        <!-- <use xlink:href="#MyPath" fill="none" stroke="red"  /> -->

        <text  font-size="50"  >
          <textPath xlink:href="#MyPath" startOffset="50%">
            我是一段乖巧的实例文字centerdtextdpath元
          </textPath>
        </text>

        <!-- Show outline of the viewport using 'rect' element -->
        <!-- <rect x="1" y="1" width="998" height="298"
            fill="none" stroke="black" stroke-width="2" /> -->
      </svg>
  </body>
</html>