[英]How can i change the opacity of my SVG line with a text input?
我正在嘗試通過文本輸入更改SVG行的不透明度,但找不到該問題的任何解決方法。
我正在嘗試更改此var中的不透明度。 我的整個代碼都在下面
我做了一切: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>
試試這個代碼:
<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>
在輸入標簽上設置一個EventListener,並將不透明度設置為文本輸入的值。
有關EventListener的文檔: EventTarget.addEventListener()
像這樣:
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.