javascript - SVG Pattern 不会改变填充颜色
问题描述
我正在使用 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>
解决方案
在这里工作正常:
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>
推荐阅读
- asp.net-core - 使用具有多目标依赖项的 Azure DevOps 构建 .NET Framework Web 应用
- mql4 - 如何解决货币组网格订单EA代码中的多个订单打开问题
- typescript - 如何在 apollo 客户端策略中使用 readField 来选择具有参数的查询
- mysql - 单个 Prisma 查询中的 LEFT JOINS 和聚合
- google-tag-manager - Google 跟踪代码管理器 - 用于批量分发发布/批准访问权限的用户组或其他“RBAC”权限方法
- hadoop - Hadoop,当我运行 start-all.sh 文件时,只有 JPS 守护程序启动
- pytorch - Pytorch 调度程序:如何减少 LR 时期
- php - 在 exec() php 函数中使用 git 命令
- datastage - 数据阶段 ELT 的替代方法?
- laravel - 所有字段的 Elasticsearch 正则表达式