使用选择菜单选项ID更改SVG路径的颜色
使用选择菜单选项ID更改SVG路径的颜色
提问于 2022-10-27 06:52:39
我试图使用菜单上选定的选项更改svg路径的颜色。
这是我的密码。
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<select name="color" id="color">
<option value="blue">Blue</option>
<option value="red">Red</option>
</select>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<path id="path1" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M291.451,51.919v202.54c0,0,164.521,119.846,140.146,0
C407.227,134.613,291.451,51.919,291.451,51.919z"/>
</svg>
</html>
<script type="text/javascript">
$('select id="color" option value "RED"').on("click", function() {
$('#path1').css({ fill: "#ff0000" });
});
</script>此代码用于处理按钮(按下按钮会改变颜色)，但我需要它使用选择菜单选项。正确的方法是什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-10-27 07:06:36
您实际上希望在使用change和<select>元素时侦听<input>事件。在回调中，通过选择<option>(引用event.target)并使用.val()方法：$(this).val()，可以在jQuery中获得所选的event.target值。
// you can listen for the "change" event on <select> and <input> elements
$('#color').on("change", function () {
// get the value from the event target
const color = $(this).val()
$('#path1').css({ fill: color });
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<select name="color" id="color">
<option>Select color</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="#884ab2">Purple</option>
</select>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<path id="path1" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M291.451,51.919v202.54c0,0,164.521,119.846,140.146,0
C407.227,134.613,291.451,51.919,291.451,51.919z" />
</svg>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74224086
复制相关文章
相似问题
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
