button 相关问题

我有一个交互式 SVG - 以全窗口大小显示。我想为其添加一些按钮。是否可以在标签内添加普通元素？我想不是，但我想问... 我有一个交互式 SVG - 以全窗口大小显示。我想为其添加一些按钮。是否可以在 <button> 标签内添加普通的 <svg> 元素？我想不是，但我想问 SVG 是否有类似的东西。从一些绘图中，我得到了这样的糟糕结果： https://jsfiddle.net/pvxr6g8k/1/ <svg version="1.1" id="svg9723" height="768" width="1268"> <g style="fill:#e6e6e6" id="g3332-7" transform="matrix(0.27404175,0,0,-0.447665,86.580009,508.16151)"> <g style="fill:#e6e6e6" clip-path="url(#clipPath3336-0-0)" id="g3334-7"> <g style="fill:#e6e6e6" transform="translate(992.5469,164.3086)" id="g3340-6"> <path inkscape:connector-curvature="0" id="path3342-2" style="fill:#e6e6e6;stroke:#241a5d;stroke-width:4.48957968;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -6.937,0 -12.58,5.645 -12.58,12.58 l 0,63.277 c 0,6.937 5.643,12.581 12.58,12.581 l 279.488,0 c 6.936,0 12.58,-5.644 12.58,-12.581 l 0,-63.277 C 292.068,5.645 286.424,0 279.488,0 L 0,0 Z"></path> </g> </g> </g> <text transform="scale(0.9324557,1.072437)" id="text3390-1" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11.87269115px;font-family:'Times New Roman';-inkscape-font-specification:'Times New Roman, Bold';writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" x="413.18262" y="390.15326"> <tspan style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Arial;-inkscape-font-specification:'Arial Bold'" y="390.15326" x="413.18262" id="tspan3392-0" sodipodi:role="line">BUTTON</tspan> </text> </svg> 问题不在于视觉外观，而在于结构，它不允许我使用 JS 绑定事件或与其交互。更何况按钮“按下”的视觉点击效果更难实现。那么交互式 SVG 中按钮的解决方案是什么？ HTML中有没有像按钮这样好的元素？我不必嵌入html按钮，任何好的按钮替换都可以 <button> 是一个 HTML 元素，因此不能（直接）进入 SVG 元素。但是，您可以考虑使用 <foreignObject position attributes> <html:button>Button1</html:button> </foreignObject> 只需确保正确声明名称空间，例如在根 <svg> 元素上，使用 xmlns:html="http://www.w3.org/1999/xhtml" 这适用于大多数浏览器。 Internet Explorer 不支持，但 Microsoft Edge 支持。或者，您可以绘制自己的类似按钮 <rect> 并附加一个 click 事件处理程序，这样也可以正常工作。您至少可以插入一个链接（然后将其样式设置为按钮）。我将 Illustrator 的链接放在 SVG 中。也许一个按钮也是可能的。但您可以在我们的网站上看到工作链接 http://www.kleinefische.com 在 svg 中它看起来像： <a xlink:href="http://www.kleinefische.com" > <polygon fill="none" points="162,263.3 251.6,256 252.7,273.3 163,280.5"/> <text transform="matrix(0.9967 -8.087198e-02 8.087198e-02 0.9967 162.7812 272.6545)" fill="#FFFFFF" font-family="'TradeGothicLT-Bold'" font-size="12.9937"> /AGENTUR </text> </a> 您可以使用 <foreignObject> 来实现这一点。 SVG 允许在 SVG 内容中包含来自任何地方的外部命名空间的元素。一般来说，SVG 用户代理将在 DOM 中包含未知元素，但会忽略未知元素。外来对象您可以向 svg 对象添加 onclick 属性，例如： onclick='window.location =("http://...");' 你可以将 iframe 放在按钮内 <button><iframe></iframe></button> button { display : block; /* or inline-block */ } button iframe { pointer-events : none; position: relative; z-index : 0; } 你可以尝试一下D3JS。请参阅此处有关处理鼠标事件的文档：https://github.com/d3/d3-selection/blob/master/README.md#handling-events 举个例子：无法在D3 JavaScript库中获取点击事件

javascript css button svg

回答 6 投票 0

我试图使其成为一个随机可见且可点击的小链接按钮。我怎样才能做到这一点？

我正在建立一个教堂网站，我是编码新手，所以我不完全理解伪代码，但这是我现在所拥有的： @关键帧偏移修复{ 0% { 背景颜色：#ffffff； } ...

html css button browser visibility

回答 1 投票 0

Android 根据 API 级别不同的按钮样式

我想使用样式 =“？android：attr / borderlessButtonStyle” 对于我的按钮。这需要分钟。 API 级别 11。我希望我的应用程序最低 API 级别为 9。所以我在默认情况下使用了 styles 标签

android button

回答 2 投票 0

button.PerformClick();无法在表单加载中工作

我在 form_load 中调用按钮单击，如下所示：公共无效Form1_Load（对象s，EventArgs e） { 按钮.PerformClick(); } 但加载后按钮没有被点击，我在做什么

c# winforms button

回答 4 投票 0

警告：遇到两个具有相同键的子项，`[object Object]1`

addItem 函数不起作用，它给出了该错误：警告：遇到两个具有相同键的子项，[object Object]1。键应该是唯一的，以便组件保持其状态身份

javascript reactjs button

回答 1 投票 0

有没有办法通过单击按钮来更改画布上的图像？

单击后，我希望画布上的图像发生变化。重新启用已禁用的按钮时。这是我的按钮代码单击后，我希望画布上的图像发生变化。重新启用已禁用的按钮时。这是我的按钮代码 <div style = "position:absolute; left:625px; top:100px; background- color:white;"> <button id="btn1" type="button" onclick="alert('The guy was disapointed. The guards come in and detain him. I think I made the wrong choice'); document.getElementById('btn2').disabled = true;" >Detain</button> <button id="btn2" type="button" onclick="alert('The guy sighs in relief and looked happy. The guards guide him to the exit. I think I made the right decision'); document.getElementById('btn1').disabled = true;">Free them</button> </div> 这是我的画布代码 <img id="Man2" width="0" height="0" src="Man2.PNG" alt="Man2"> <canvas id="myCanvas1" width="600" height="450" style="border:1px solid grey;"></canvas> <script> window.onload = function() { const canvas = document.getElementById("myCanvas1"); const ctx = canvas.getContext("2d"); const img = document.getElementById("Man2"); ctx.drawImage(img, 10, 10); }; </script> 这是画布上已有的图像。这就是我想要图像变成的样子。我尝试添加另一个按钮 id 并尝试通过画布上的 Id 获取元素，但它不起作用。 <div style="position:absolute; left:625px; top:100px; background-color:white;"> <button id="btn1" type="button" onclick="detain()">Detain</button> <button id="btn2" type="button" onclick="free()">Free them</button> </div> <img id="Man1" width="0" height="0" src="Man1.PNG" alt="Man1"> <img id="Man2" width="0" height="0" src="Man2.PNG" alt="Man2"> <canvas id="myCanvas" width="600" height="450" style="border:1px solid grey;"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); changeImage("Man2"); //First image loaded on the canvas function detain() { alert('The guy was disappointed. The guards come in and detain him. I think I made the wrong choice'); document.getElementById('btn2').disabled = false; document.getElementById('btn1').disabled = true; changeImage("Man1"); //Change based on button click } function free() { alert('The guy sighs in relief and looks happy. The guards guide him to the exit. I think I made the right decision'); document.getElementById('btn1').disabled = false; document.getElementById('btn2').disabled = true; changeImage("Man2"); //Change based on button click } function changeImage(imageId) { var img = document.getElementById(imageId); ctx.clearRect(0, 0, canvas.width, canvas.height); //This should clear the canvas ctx.drawImage(img, 10, 10); } </script> 在此代码片段中，按钮单击是在脚本标记内部处理的，特别是在创建画布并且存在引用之后。由于我还没有对此进行测试，请提供反馈，我最终会编辑需要的内容。

html button canvas onclick

回答 1 投票 0

单击时按钮不移动

我创建了一个按钮，单击它时必须移动到随机位置。我创建了一个 html 页面，其中有一个按钮功能。该函数被调用，我创建了两个变量 height 和 wid...

javascript html function button position

回答 1 投票 0

表单错误中的“action_page.php”导致错误404

我想用 HTML 创建一个表单，并将其引导至演示页面“action_page.php”。当我按“提交”时，它显示错误 404。我尝试上下更改属性但是...

html forms button hyperlink demo

回答 2 投票 0

如何让我的按钮向表格添加元素

我想添加一个按钮，每次单击它时都会将一个元素添加到总数中：控制台显示： Uncaught TypeError: Cannot create property 'id' on number '2' 按钮：我想添加一个按钮，每次单击它时都会将一个元素添加到总数中：控制台显示：未捕获类型错误：无法在数字“2”上创建属性“id” 按钮： <div key={item.id} className="item"> <p onClick={()=>add(item.id)}>+</p> <p>{item.product}</p> <p>{item.price}</p> <p className="delete" onClick={() => del(item.id)}>×</p> </div> 删除按钮（x）正在工作项目数组：并在代码中： import './App.css'; import React, {Component} from 'react'; import Items from './components/item/items' import AddItem from './components/addItem/addItem' import Total from './components/total/total' class App extends Component { state = { items: [ {id:1, product:'Pen', price:2}, {id:2, product:'Book', price:10} ] } deleteItem = (id) => { let items = this.state.items let i = items.findIndex(item => item.id === id) items.splice(i, 1) this.setState({items: items}) } addItem = (item) => { this.state.items.length > 0 ? ( item.id = this.state.items[this.state.items.length - 1].id + 1 ) : item.id = 1 console.log(item.id) let items = this.state.items items.push(item) this.setState({items: items}) } render() { return ( <div className="container"> <h1>Product List React App</h1> <div className="table"> <Items items={this.state.items} del={this.deleteItem} add={this.addItem}/> <AddItem add={this.addItem}/> <Total items={this.state.items}/> </div> </div> ) } } export default App; 你可以这样做 const updatedItems = this.state.items.filter((_,idx)=> idx!= item)) this.setState({items: updatedItems})

javascript reactjs button

回答 1 投票 0

VBA 使用命令按钮打开现有文件夹

下面的代码无法识别现有文件夹。我测试了搜索商店订单号 MSO-40550（代码仅搜索“40550”）。我能够将鼠标悬停在以下代码行上：

vba button directory command

回答 0 投票 0

未输入任何内容且按下按钮时程序崩溃

你好，我正在制作一个随机数猜测游戏。问题是，如果用户没有输入任何数字并按下 if 条件中的按钮，则应执行 answerEmpty 变量，并且 &q...

android kotlin button crash

回答 1 投票 0

button 相关问题

最新问题