Javascript 是否可以绑定在VueJS中使用url（）的SVG填充属性？

我需要动态绑定SVG rect元素的fill属性，但它不起作用。下面是我的简单VueJS组件，演示我正在尝试做什么（也可在中获得）

新Vue({
el:‘身体’，
数据：{
标题：“Vuejs SVG绑定示例”，
myid:'梯度2'，
myfill:'url（#gradient2）'
},
});

请注意，

fill

属性使用了

url（）

，它将元素id作为参数，这使事情变得复杂。据我所知，

fill

属性使用同一组件中定义的

linearGradient

的唯一方法是按元素

id

属性引用它

---

我之所以尝试这样做，是因为我希望避免在组件内部硬编码

id

s。由于我将在网页上有许多此组件的实例，因此将有多个元素具有相同的

id

值，这是不应该发生的。

是的，可以执行希望执行的操作。我做了一些类似的事情，但只使用了一个div，而不是svg

理论 将动态css类名绑定到svg，并在该类中填充。此链接显示如何使用css创建css

我提出的解决方案假设通过道具向组件传递一些值

解决方案

...
...
新Vue({
el:‘身体’，
数据：{
标题：“Vuejs SVG绑定示例”，
myid:'梯度2'，
myfill:有人建议你去
},
});

对第一个答案的修改 在试用小提琴时，我认为您的编码是正确的，您只是使用了Vuejs的旧版本（我在尝试让小提琴工作时注意到了这一点）。无论如何，我无法让你的笔与vue一起使用，所以我在这里创建了一个全新的小提琴

代码

<div>
  {{ title }}
  <!-- this works but id and fill attributes are hardcoded -->
  <svg class="green" width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="50" :fill="gradient1" />
  </svg>

  <!-- this doesn't work... -->
  <svg class="green" width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="50" :fill="gradient2" />
  </svg>


  // I HAVE PUT THE GRADIENTS IN THERE OWN SVG
  <svg aria-hidden="true" focusable="false" style="width:0;height:0;position:absolute;">
    <linearGradient id="gradient1">
      <stop stop-color="yellow" offset="0%" />
      <stop stop-color="blue" offset="100%" />
    </linearGradient>
    <linearGradient id="gradient2">
        <stop stop-color="red" offset="0%" />
        <stop stop-color="green" offset="100%" />
    </linearGradient>
  </svg>
</div>

{{title}}
//我已经把梯度放在那里了

很抱歉，根据您的回答，我无法使其正常工作。能否创建一个代码笔示例来演示您的方法？（你可以用我的代码笔例子来改变它）@mlst我已经更新了我的答案。您使用的是什么版本的vue，笔中链接的版本非常旧，这就是为什么您无法绑定当我看到您的示例时，我意识到我需要将渐变定义移动到另一个svg元素以防止出现多个gradiend id。谢谢。

<template>
...

    <rect width="100" height="50" :class="myfill" />
...
</template>

<script>
new Vue({
  el: 'body',
  data: {
    title: 'Vuejs SVG binding example',
    myid: 'gradient2',
    myfill: somePropYouPassedIn
  },
});
</script>

<div>
  {{ title }}
  <!-- this works but id and fill attributes are hardcoded -->
  <svg class="green" width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="50" :fill="gradient1" />
  </svg>

  <!-- this doesn't work... -->
  <svg class="green" width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="50" :fill="gradient2" />
  </svg>


  // I HAVE PUT THE GRADIENTS IN THERE OWN SVG
  <svg aria-hidden="true" focusable="false" style="width:0;height:0;position:absolute;">
    <linearGradient id="gradient1">
      <stop stop-color="yellow" offset="0%" />
      <stop stop-color="blue" offset="100%" />
    </linearGradient>
    <linearGradient id="gradient2">
        <stop stop-color="red" offset="0%" />
        <stop stop-color="green" offset="100%" />
    </linearGradient>
  </svg>
</div>