日期: 2018 年 7 月 19 日

SVG 笔记

1、活动价标签

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">
     <defs>
         <radialGradient id="grad1" cx="50%" cy="50%" r="90%" fx="70%" fy="70%">
              <stop offset="0%" style="stop-color:rgb(252, 248, 1);stop-opacity:1" />
              <stop offset="100%" style="stop-color:rgb(255, 0, 0);stop-opacity:1" />
         </radialGradient>
     </defs>
     <polygon points="0 0,36 0,0 36" fill="url(#grad1)"/>
     <text x="-2"  y="-5" transform="rotate(-45 36,0)" style="stroke:none; fill:#fff;">活动价</text>
</svg>
.svg-triangle{
        position:absolute;
    margin: -6px auto;
    width: 36px;
    height: 36px;    
    font-size:8px;
}