SVG输入字段
SVG输入字段
提问于 2018-11-30 20:14:48
我试图让我的一个SVG文本字段在用户按下它时接受用户的输入。有没有办法做到这一点？
const wrapper = document.getElementById('wrapper');
const text = document.getElementById('Username');
const inputWrapper = document.getElementById('input-wrapper');
const input = document.getElementById('input');
const button = document.getElementById('button');
text.addEventListener('click', () => {
text.classList.toggle('hide');
inputWrapper.classList.toggle('hide');
input.focus();
});
button.addEventListener('click', () => {
text.classList.toggle('hide');
inputWrapper.classList.toggle('hide');
});
input.addEventListener('change', (e) => {
text.innerText = e.target.value;
}); .cls-1 {
clip-path: url(#clip-Login_page);
}
.cls-2 {
opacity: 0.67;
fill: url(#pattern);
}
.cls-3 {
fill: #d9d9d9;
}
.cls-3, .cls-5 {
stroke: #0d0d0d;
}
.cls-4 {
fill: url(#pattern-2);
}
.cls-5 {
fill: #f2f2f2;
}
.cls-6, .cls-7 {
fill: #707070;
font-family: Georgia;
}
.cls-6 {
font-size: 25px;
}
.cls-7 {
font-size: 20px;
}
.cls-8 {
stroke: none;
}
.cls-9 {
fill: none;
}
.cls-10 {
fill: #fff;
}
.cls-11 {
filter: url(#Rectangle_5);
}
.cls-12 {
filter: url(#Amcan_logo);
}
.cls-13 {
filter: url(#Rectangle_2);
}
.hide {
display: none;
} <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 375 667">
<defs>
<pattern id="pattern" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 1920 1080">
<image width="1920" height="1080" xlink:href="img/Amcan.gif"/>
</pattern>
<filter id="Rectangle_2" x="11" y="178" width="354" height="63" filterUnits="userSpaceOnUse">
<feOffset dy="5" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur"/>
<feFlood flood-opacity="0.161"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
<pattern id="pattern-2" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 593 186">
<image width="593" height="186" xlink:href="img/Amcan_logo.png"/>
</pattern>
<filter id="Amcan_logo" x="13" y="28" width="349" height="123" filterUnits="userSpaceOnUse">
<feOffset dy="10" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur-2"/>
<feFlood flood-opacity="0.161"/>
<feComposite operator="in" in2="blur-2"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="Rectangle_5" x="77" y="369" width="222" height="63" filterUnits="userSpaceOnUse">
<feOffset dy="5" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur-3"/>
<feFlood flood-opacity="0.161"/>
<feComposite operator="in" in2="blur-3"/>
<feComposite in="SourceGraphic"/>
</filter>
<clipPath id="clip-Login_page">
<rect width="375" height="667"/>
</clipPath>
</defs>
<g id="Login_page" data-name="Login page" class="cls-1">
<rect class="cls-10" width="375" height="667"/>
<rect id="Amcanerino" class="cls-2" width="510" height="667" transform="translate(-71)"/>
<g class="cls-13" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Rectangle_2-2" data-name="Rectangle 2" class="cls-3" transform="translate(20 182)">
<rect class="cls-8" width="336" height="45"/>
<rect class="cls-9" x="0.5" y="0.5" width="335" height="44"/>
</g>
</g>
<g class="cls-12" transform="matrix(1, 0, 0, 1, 0, 0)">
<rect id="Amcan_logo-2" data-name="Amcan_logo" class="cls-4" width="331" height="104" transform="translate(22 28)"/>
</g>
<g id="Rectangle_3" data-name="Rectangle 3" class="cls-5" transform="translate(20 250)">
<rect class="cls-8" width="336" height="45"/>
<rect class="cls-9" x="0.5" y="0.5" width="335" height="44"/>
</g>
<g id="Rectangle_4" data-name="Rectangle 4" class="cls-5" transform="translate(20 311)">
<rect class="cls-8" width="336" height="45"/>
<rect class="cls-9" x="0.5" y="0.5" width="335" height="44"/>
</g>
<g class="cls-11" transform="matrix(1, 0, 0, 1, 0, 0)">
<g id="Rectangle_5-2" data-name="Rectangle 5" class="cls-3" transform="translate(86 373)">
<rect class="cls-8" width="204" height="45"/>
<rect class="cls-9" x="0.5" y="0.5" width="203" height="44"/>
</g>
</g>
<text id="SUBMIT" class="cls-6" transform="translate(139 405)"><tspan x="0" y="0">SUBMIT</tspan></text>
<text id="Login" class="cls-6" transform="translate(156 214)"><tspan x="0" y="0">Login</tspan></text>
<div id="wrapper">
<text id="Username" class="cls-7" transform="translate(142 280)"><tspan x="0" y="0">Username</tspan></text>
<div id="input-wrapper" class="hide">
<input id="input" type="text" value="Username"/>
<button id="button">Submit</button>
</div>
</div>
<text id="Password" class="cls-7" transform="translate(145 341)"><tspan x="0" y="0">Password</tspan></text>
</g>
</svg>
这是Solo建议的修改后的代码。
回答 5
Stack Overflow用户
发布于 2018-11-30 21:02:18
和<text>不是html元素，而是具有自己属性的svg元素。tspan上不存在contenteditable属性(您可以console.log document.querySelector("#myTspan").isContentEditable，它将返回undefined。
但是，它可以从其父级继承属性。因此，在HTML文件中使用内联svg的情况下，将svg包装在可编辑元素中可以在某些浏览器中工作，但是所有文本都是可编辑的。
<div contenteditable="true">
<svg>
<text id="Username" class="cls-7" transform="translate(142 20)"><tspan x="0" y="0">Username</tspan></text>
</svg>
</div>
在独立的SVG中，您无法进行可满足的工作，因为它是HTML规范的一部分，而不是SVG的一部分。
正如其他答案所建议的那样，您必须使用脚本，但请仔细阅读(因为您一开始没有提到它是一个独立的svg)：Including JavaScript in SVG
Stack Overflow用户
发布于 2018-12-01 01:21:58
可以，也可以不可以，您不能直接编辑文本，但您可以将输入放在它上面。请参见以下代码：
.input-real {
background: rgba(255, 255, 255, 0);
color: transparent;
padding: 0;
border: 0 none transparent;
line-height: 0;
}
.input-real:focus {
background: rgba(255, 255, 255, 1);
color: #333;
}
.input-real,
.input-mimic {
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}<svg viewBox="0 0 375 667">
<text id="Username" class="input-mimic" x="50" y="50" alignment-baseline="hanging">Username</text>
<foreignObject width="50" height="23" x="50" y="46">
<input id="input" class="input-real" type="text" value="Username"/>
</foreignObject>
</svg>
Stack Overflow用户
发布于 2018-11-30 20:17:50
在tspan上使用contenteditable
更多信息请点击此处- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
它是如何工作的？
您所要做的就是在几乎任何HTML元素上设置contenteditable属性，使其成为可编辑的。
function toggleEdit() {
var text = document.getElementById('Username');
var tspan = text.firstElementChild;
tspan.setAttribute('contenteditable', true);
}<text id="Username" class="cls-7" transform="translate(142 280)"><tspan x="0" y="0">Username</tspan></text>
<div><button onclick="toggleEdit();">Edit input</button></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53557407
复制相关文章
相似问题
腾讯云开发者
