动画SVG：仅在单击边框时才能在单击上进行动画处理

编程问答 2022-06-04

问题描述

我试图用两个动画制作SVG，使彩色框看起来突出显示文本。参见下面的最小示例。

当前，文本位于彩色框的前面，因为如果我反过来这样做，文本会变得很暗（在此示例中，它不是很糟糕，因为文本是黑色的，而其他颜色则更多） 。但是现在可以单击彩色框的很小的边框。我希望整个框都是可单击的，但文本要放在颜色的前面。有办法吗？

<svg
  version="1.1"
  baseProfile="full"
  width="110" height="30"
  xmlns="http://www.w3.org/2000/svg">
  
  <rect id="redBox" x="0" y="0" width="110" height="30" rx="4" ry="4" style="fill:red;stroke:none;fill-opacity:0" />
  
  <animate xlink:href="#redBox" attributeType="CSS" attributeName="fill-opacity" 
           from="0" to="0.5" dur="1s" begin="click" fill="freeze"/>
  <rect x="5" y="5" width="100" height="20" rx="4" ry="4" fill="none" stroke="black" />
  
  <text dominant-baseline="central" font-size="11px">
    <tspan x="10" y="14.5">Highlight on click</tspan>
  </text>
  
</svg>

。

解决方法

只需使文本指针-events =“ none”，然后单击鼠标即可到达您想要的父级。

<template>
  <div
    class="short-term__table"
    v-for="(credit,index) in credits"
    :key="index"
  >
    <div class="row ribbon">
      
      <div class="col" @click="showDetails(index)">
        <i
          class="caret-right fas fa-caret-right"
          :class="credit.active ? 'active' : ''"
        >
        </i>
      </div>
    </div>
    <CreditDetails v-if="credits[index].active" />
  </div>
</template>

<script>
import CreditDetails from "./credit-item-details.component";
export default {
  components: {
    CreditDetails,},data() {
    return {
      credits: [
        {

          active: false,{
          active: false,{
          active: true,],};
  },methods: {
    showDetails(index) {
      this.credits[index].active = !this.credits[index].active;
    },};
</script>

<style scoped lang="scss">

  .active {
    transform: rotate(90deg);
  }

</style>

svgsvg-animate