主页 / 问题 / 1109694
Accepted
spoon 100500
Asked:2020-04-13 19:59:51 +0800 CST2020-04-13 19:59:51 +0800 CST

在 svg 上绘制按钮

  • 772

告诉我如何在 svg 上绘制这样的按钮在此处输入图像描述

svg

2 个回答

  1. Best Answer

    好像是这样……我在没有 SVG 编辑器的情况下绘制

    <svg id="svg" viewBox="0 1 270 75" xmlns="http://www.w3.org/2000/svg" width="270">
  <path d="M3,36 C3,36 2,11 30,7 L246,6 C246,6 278,13 264,51 L268,75 217,65 26,65 C26,65 4,62 3,36" 
        fill="#ffd4d5"/>
</svg>

    来自编辑

    <svg viewBox="5 269 73.808495 18.61533" xmlns="http://www.w3.org/2000/svg">

  <path d="m 13.356167,268.90458 57.92485,0.0945 c 4.8978,-0.0403 7.47846,6.53474 4.34673,12.37872 l 0.37798,6.14211 -5.85864,-2.55134 -57.735861,-0.0945 c -9.4712613,0.032 -9.4712613,-15.87056 0.944941,-15.96949 z" fill="#ffd4d5"/>

</svg>

    • 5 

  2. g {
  fill: #fdd;
  transition: 500ms;
}
g:hover {
  fill: wheat;
}
text {
  pointer-events: none;
}
    <svg>
 <defs>
    <filter id="shadow" x=-50% y=-50% width=200% height=200%>
       <feDropShadow dx="5" dy="5" stdDeviation="5" 
                     flood-color="#333" flood-opacity=".1" />
    </filter>
  </defs>
  
  <g>
    <rect filter="url(#shadow)"  
          x="10" y="10" width="270" height="70" rx="25" />
    <polygon points="270 60  250 80  285 95" />   
  </g>
  <text x="140" y="50" text-anchor="middle">example text</text>
</svg>

    • 3

相关问题