Как коллективно установить атрибуты SVG?

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>

Здесь у вас есть Список свойств SVG, которые вы можете манипулировать с помощью CSS