Шаблон SVG не меняет цвет заливки

Question

Я использую Vue. js и создаю SVG, в которых в качестве фона используются шаблоны форм. Шаблоны работают нормально, но всякий раз, когда я пытаюсь изменить цвет заливки узора динамически, передавая реквизиты, это не работает. Я уверен, что пропуска, которую я передаю, верна, поскольку я использую ее в другом месте.

<pattern
    id="TrianglePattern"
    patternUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="1500"
    height="1500"
    viewBox="0 0 10 10">
  <path
      d="M 0 0 L 7 0 L 3.5 7 z"
      :fill="groupDetails.color ? groupDetails.color : '#ffffff'"
      stroke="blue" />
</pattern>

Answer 1

Здесь отлично работает:

new Vue({
    el: '#app',
    data: {
    	groupDetails: {
        	color: 'red'
        }
    }
});

label, input {
    cursor: pointer;
}

<script src="//unpkg.com/vue@2"></script>

<main id="app">
    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
        <pattern id="TrianglePattern"
                 patternUnits="userSpaceOnUse"
                 x="0" y="0" width="150" height="150"
                 viewBox="0 0 10 10">
            <path d="M 0 0 L 7 0 L 3.5 7 z"
                  :fill="groupDetails.color ? groupDetails.color : '#ffffff'"
                  stroke="blue" />
        </pattern>

        <path d="M100,10 a90,40 0 1,0 .1,0 z" fill="url(#TrianglePattern)" stroke="black" />
    </svg>

    <div>
        <label><input type="radio" v-model="groupDetails.color" value="red"/>   Red</label>
        <label><input type="radio" v-model="groupDetails.color" value="green"/> Green</label>
        <label><input type="radio" v-model="groupDetails.color" value="blue"/>  Blue</label>
        <label><input type="radio" v-model="groupDetails.color" value="yellow"/> Yellow</label>
    </div>
</main>