svg mask 绘制tip 提示框

效果如下

1670918923328.png

主要使用svg 的mask 标签

在 SVG 中，你可以指一个透明的遮罩层和当前对象合成，形成背景。透明遮罩层可以是任何其他图形对象或者<g>元素。mask元素用于定义这样的遮罩元素。属性[mask](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/mask)用来引用一个遮罩元素。

专有属性

• maskUnits
• maskContentUnits <small style="box-sizing: border-box;">(en-US)<small style="box-sizing: border-box;"></small></small>
• x
• y
• width
• height

示例

<template>
  <svg class="icon">
    <defs>
      <linearGradient id="TipBg" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%"  stop-color="#409EFF"/>
        <stop offset="50%" stop-color="#409EFF"/>
        <stop offset="100%" stop-color="#fff"/>
      </linearGradient>
  </defs>
    <symbol id="tipIcon" viewBox="0 0 1024 1024" :width="tipWidth" :height="tipWidth" fill="#000" fill-opacity="0.7">
      <mask id="tipMask"  maskContentUnits="userSpaceOnUse" >
        <text x="512" y="512" fill="#fff" font-size="300px" text-anchor="middle" >{{tipText}}</text>
      </mask>
      <!-- tip 背景图标 -->
      <path id="tip"
      d="M170.666667 85.333333 853.333333 85.333333C900.266667 85.333333 938.666667 123.733333 938.666667 170.666667L938.666667 682.666667C938.666667 729.6 900.266667 768 853.333333 768L682.666667 768 512 938.666667 341.333333 768 170.666667 768C123.733333 768 85.333333 729.6 85.333333 682.666667L85.333333 170.666667C85.333333 123.733333 123.733333 85.333333 170.666667 85.333333Z"></path>
      <use mask="url(#tipMask)" xlink:href="#tip" fill="#fff"  />
      </symbol>
  </svg>
</template>
<script>
export default {
  name: 'markTip',
  props: {
    tipText: {
      type: String,
      default: () => ''
    },
    tipWidth: {
      type: Number,
      default: () => 50
    }
  }
}
</script>