如何通过文本输入更改SVG行的不透明度？
[英]How can i change the opacity of my SVG line with a text input?
问题描述
I am trying to change the opacity of my SVG line with a text input but i can't find any resolutions for that problem. 
我正在尝试通过文本输入更改SVG行的不透明度，但找不到该问题的任何解决方法。
I am trying to change the opacity in this var. 我正在尝试更改此var中的不透明度。 Whole code i have is down bellow 我的整个代码都在下面
I did everything :D 我做了一切：D
<script src="snap.svg-min.js"></script>
<script>
window.onload = function () {
var s = Snap("#iconDiv");
Snap.load("Entwurf.svg", function(f) {
var L_KOM_AUT = f.select("#L_KOM_AUT");
L_KOM_AUT.attr({
fill: '#101010',
opacity:0.00001,
});
s.append(f);
});
};
</script>
</head>
<body>
<div class="input">
<label for="mail">Opacity:</label>
<input type="text" name="opacity" autocomplete="off">
</div>
<div id="iconDiv"></div>
</body>
2 个解决方案
解决方案1
1 2019-08-21 12:34:03
Try this code: 试试这个代码：
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%"> <stop offset="0%" style="stop-color:skyblue;" /> <stop offset="100%" style="stop-color:seagreen;" /> </linearGradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" /> <circle cx="50" cy="50" r="40" fill="black" /> <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" /> </svg>
解决方案2
0 2019-08-21 09:46:27
Set a EventListener on the input tag and set the opacity to the value of the text input. 在输入标签上设置一个EventListener，并将不透明度设置为文本输入的值。
Documentation on EventListeners: EventTarget.addEventListener() 有关EventListener的文档： EventTarget.addEventListener（）
Like this: 像这样：
window.onload = function () {
var s = Snap("#iconDiv");
Snap.load("Entwurf.svg", function(f) {
var L_KOM_AUT = f.select("#L_KOM_AUT");
L_KOM_AUT.attr({
fill: '#101010',
opacity:0.00001,
});
s.append(f);
});
var textInput = document.querySelector('input');
var svg = document.querySelector('#L_KOM_AUT');
textInput.addEventListener('keyup', function() {
svg.style.opacity = this.value;
}
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.