Question

我有一个带有两个svg箭头的页面，代码段如下所示：

<div class="button prev-button" v-on:click="prevPage">
    <svg class="button-icon" stroke-linecap="round" stroke-width="1" stroke="rgb(0,0,0)" stroke-opacity="0.2" fill="none" stroke-linejoin="round" viewBox="0 0 5 6" xmlns="http://www.w3.org/2000/svg">
        <path d="M4,0L1,3L4,6" ></path>
    </svg>
</div>
<div class="button next-button" v-on:click="nextPage">
    <svg class="button-icon" stroke-linecap="round" stroke-width="1" stroke="rgb(0,0,0)" stroke-opacity="0.2" fill="none" stroke-linejoin="round" viewBox="0 0 5 6" xmlns="http://www.w3.org/2000/svg">
        <path d="M1,0L4,3L1,6" ></path>
    </svg>
</div>

其中两个svg属性相同。有没有办法集体声明它们？例如像

svg {
    attribute1: value1;
    attribute2: value2;
    ...
}

谢谢！

Answer 1

是的，您可以这样做。但是，有些属性无法在CSS中进行操作，例如d属性。

svg {
  width: 50px;
}
svg path{
  stroke-linejoin: round;
  stroke-width: 1;
  stroke: rgb(0, 0, 0);
  stroke-opacity: 0.2;
  fill:none;
  stroke-linejoin:round;
}

<div class="button prev-button" v-on:click="prevPage">
  <svg class="button-icon" viewBox="0 0 5 6" xmlns="http://www.w3.org/2000/svg">
        <path d="M4,0L1,3L4,6" ></path>
    </svg>
</div>
<div class="button next-button" v-on:click="nextPage">
  <svg class="button-icon" viewBox="0 0 5 6" xmlns="http://www.w3.org/2000/svg">
        <path d="M1,0L4,3L1,6" ></path>
    </svg>
</div>

您在这里有一个List of SVG Properties You Can Manipulate with CSS

如何集体设置svg属性？

1 个答案: