title: How to collectively set svg attributes?
body: <p>I have a page with two svg arrows, and the code segment looks like:</p>
  
  <pre><code>&lt;div class="button prev-button" v-on:click="prevPage"&gt;
      &lt;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"&gt;
          &lt;path d="M4,0L1,3L4,6" &gt;&lt;/path&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  &lt;div class="button next-button" v-on:click="nextPage"&gt;
      &lt;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"&gt;
          &lt;path d="M1,0L4,3L1,6" &gt;&lt;/path&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>where the two svg attributes are identical. Is there a way to declare them collectively? e.g. something like </p>
  
  <pre><code>svg {
      attribute1: value1;
      attribute2: value2;
      ...
  }
  </code></pre>
  
  <p>Thanks!</p>