主页 / 问题 / 1110519
Accepted
spoon 100500
Asked:2020-04-15 12:56:28 +0000 UTC2020-04-15 12:56:28 +0000 UTC

通过样式 css 添加三角形多边形 svg

  • 772

g {
  fill: #fdd;
  transition: 500ms;
}
g:hover {
  fill: wheat;
}
text {
  pointer-events: none;
}
.pol{
clip-path: polygon(270px 60px, 250px 80px, 285px 95px);
}
<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>

<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 class="pol" />   
  </g>
  <text x="140" y="50" text-anchor="middle">Пример с clip-path</text>
</svg>

我通过将这一行更改为这一行<polygon points="270 60 250 80 285 95" />来完成样式<polygon class="pol" />，但它不起作用

javascript

2 个回答

  1. 要更改工具提示的轮廓，您可以尝试使用属性动画d path

    动画基于从path没有箭头的初始椭圆到有箭头的最终椭圆的平滑过渡path。

    当您将鼠标悬停在工具提示上时，工具提示的颜色会发生变化，并且当您单击它时会出现一个箭头。
    再次单击时，箭头会平滑消失。 

    var tooltip = document.getElementById("svg1"),
  close = document.getElementById('close'),
  open = document.getElementById("open");
let flag = true;
tooltip.addEventListener('click', function() {
  if (flag == true) {
    close.beginElement();
    flag = false;
  } else {
    open.beginElement();
    flag = true;
  }
});
    .pol {
fill: #fdd;
stroke-width:2;
stroke:#000"
transition: 500ms;
filter:url(#shadow);
}
:hover.pol {
 fill: wheat;
 }
 text {
  font-size:24px;
  fill:#7A7A7A;
  pointer-events: none;
  text-anchor:middle;
    }
    <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	   width="300" height="100" viewBox="0 0 300 100" > 
	  <defs>
	  <filter id="shadow" x="-20%" y="-20%" width="150%" height="150%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
      <feOffset dx="3" dy="3"/>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>  
<path class="pol" d="m35 10h220c13.9 0 21.9 11.2 25 25 0 0 3.1 20.9-1.8 29.4C273.6 72.5 266.8 80 255 80 192.3 79.8 35 80 35 80 21.2 80 10 68.9 10 55V35C10 21.2 21.2 10 35 10Z">
    <animate id="close"
	  attributeName="d"
	  begin="indefinite"
	  restart="whenNotActive"
	  dur="0.5s"
	  fill="freeze"
	  values="
	   m35 10h220c13.9 0 21.9 11.2 25 25 0 0 3.1 20.9-1.8 29.4C273.6 72.5 266.8 80 255 80 192.3 79.8 35 80 35 80 21.2 80 10 68.9 10 55V35C10 21.2 21.2 10 35 10Z;
	  
	  m35 10h220c13.9 0 21.9 11.2 25 25 0 0-0.2 16.3 0 29.4C280.9 132.2 282.9 79.8 255 80 192.3 80.4 35 80 35 80 21.2 80 10 68.9 10 55V35C10 21.2 21.2 10 35 10Z" />   
	   
	  <animate id="open"
	  attributeName="d"
	  begin="indefinite"
	  restart="whenNotActive"
	  dur="0.5s"
	  fill="freeze"
	  values="
	  m35 10h220c13.9 0 21.9 11.2 25 25 0 0-0.2 16.3 0 29.4C280.9 132.2 282.9 79.8 255 80 192.3 80.4 35 80 35 80 21.2 80 10 68.9 10 55V35C10 21.2 21.2 10 35 10Z;
	  
	  m35 10h220c13.9 0 21.9 11.2 25 25 0 0 3.1 20.9-1.8 29.4C273.6 72.5 266.8 80 255 80 192.3 79.8 35 80 35 80 21.2 80 10 68.9 10 55V35C10 21.2 21.2 10 35 10Z"
	    />  
	   	   
 </path> 
      <text x="140" y="50">Пример с clip-path</text>

</svg>

    您可以尝试使用更有趣的工具提示形式 

    .container {
  width:75vw;
  height:75vh;
 }
    <div class="container">
    <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"viewBox="0 0 240 240">
	<defs>
	  <filter id="shadow" x="-20%" y="-20%" width="150%" height="150%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
      <feOffset dx="3" dy="3"/>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>  
      <g  filter="url(#shadow)" transform="scale(1)">
        <path d="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z" style="fill:dodgerblue;stroke-linecap:round;stroke-linejoin:round; fill-opacity:0.5">
          <animate id="an_path"
          attributeName="d"
          values="
		  m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;
      
	     
		  m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;
		  
		  m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;
          
		 
		 m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z"
          begin="svg1.click"
          dur="6s"
          repeatCount="1"
          fill="freeze"
          restart="whenNotActive">
          </animate>
        </path>
        <text x="30" y="50" font-size="18" fill="white">click me </text>
      </g>
    </svg>
  </div>

    • 3
  2. Best Answer

    CSS 变体。答案并不完全在主题上，但也许对某人有用。

    .block {
  position: relative;
  max-width: 200px; min-height: 40px;
  border-radius: 30px;
  padding: 20px;
  background: #ffdddd; box-shadow: 3px 10px 5px 0px rgba(50, 50, 50, 0.05);
}

.block::after {
  content: ''; position: absolute;
  bottom: 2px; right: 15px; width: 80px; height: 100px;
  border-radius: 20px 0px 5px 0px;
  transform: skew(30deg, 30deg) rotate(0deg);
  background: linear-gradient(135deg, transparent 50%, #ffdddd 50%);
}
    <div class="block"></div>

    作为奖励，加上一个小鼻子动态=）

    .block {
  position: relative;
  max-width: 200px; min-height: 40px;
  border-radius: 30px;
  padding: 20px;
  background: #ffdddd; box-shadow: 3px 10px 5px 0px rgba(50, 50, 50, 0.05);
}

.block::after {
  content: ''; position: absolute;
  bottom: 2px; right: 15px; width: 0px; height: 0px;
  border-radius: 20px 0px 5px 0px;
  transform: skew(30deg, 30deg) rotate(0deg);
  background: linear-gradient(135deg, transparent 50%, #ffdddd 50%);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.block:hover::after {
  width: 80px; height: 100px;
}
    <div class="block"></div>

    • 2

相关问题