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>

​