我有一个网页，使用角和路由数据从一个TS文件。除(点击)外，一切正常。
如果我将带有(click)函数的SVG直接放在HTML中，它就能工作，但是如果我从TS文件中调用SVG，它就不起作用了。如果我删除(按一下)=linkOpen()，该链接将继续在一个新窗口中打开；如果我删除了target=iframe，该链接将在当前选项卡中打开。
project.component.html：
<div class="page" *ngIf="project$ | async as project">
<div [innerHTML
浏览 2提问于2019-01-11得票数 1
回答已采纳
1回答
我对Qt很陌生。如何捕获QGraphicsSvgItem中的单击事件/信号？我有以下代码：
QGraphicsScene *scene = new QGraphicsScene(this);
QGraphicsSvgItem *svgItem = new QGraphicsSvgItem(":/SomeGraphic.svg");
svgItem->scale(0.1, 0.1);
svgItem->setPos(-200,-200);
scene->addItem(svgItem);
是否可以将svgItem的click()信号连接到插槽上？
浏览 4提问于2016-04-02得票数 1
1回答
我有一个HTML元素，用于显示<object>图像(type="image/svg+xml")。我正在尝试禁用此<object> 元素上的右键菜单，但它似乎不监听鼠标事件。
我在div上也做了同样的工作。
知道如何通过Javascript/jQuery/CSS来处理这个问题吗？请注意，我必须使用<object>来显示SVG。
我的代码：
var url = "https://css-tricks.com/wp-content/uploads/2015/05/kiwi.svg";
var svg = document.cre
浏览 0提问于2016-05-04得票数 2
回答已采纳
1回答
我有以下html ( angular 5组件中的一个模板)：
<div class="center">
<object id="img" data="assets/img/big_layout.svg" #svg></object>
</div>
在我的组件中，我有以下内容：
@ViewChild('svg') svg: ElementRef;
ngAfterViewInit() {
this.svg.nativeElement.addEventListen
浏览 4提问于2017-11-06得票数 0
当在动态创建的SVG元素(比如由raphael.js创建的元素)上触发事件时，有没有好的方法避免IE7产生"Error: Failed“？
我认为当jQuery查看我的实时处理程序以检查SVG元素是否与我指定的任何实时选择器匹配时，会产生"Error: Failed“。现在，我手动绑定调用
e.stopPropagation();
对于每个事件(mouseenter、mouseleave、click等)拉斐尔制作的SVG。
浏览 0提问于2010-12-08得票数 1
回答已采纳
2回答
我有一个基于angular的应用程序(目前是v4.4)。我有一个视图，其中一个组件将其自身的实例显示有限次，然后在最底层的“子”组件中，有一个svg。
我希望能够拾取使用(click)事件单击的最低层组件。我认为我可以设置z-index来链接到迭代号，这样每个后续的子组件就会出现在它的父组件的顶部，所以当单击该区域中的任何地方时，都会触发正确的事件。
我已经在plunkr上做了这个。您将会看到，单击svg并不会触发clicked事件，但单击框内的任何其他区域会引发该框及其所有父级的clicked事件。
我希望能够切换所有的盒子able背景颜色独立。
以下是我拥有的组件：
@Component(
浏览 0提问于2017-10-28得票数 1
我想要识别div元素外部的点击，并根据它关闭下拉菜单。但是，单击div元素内的svg元素(包含input元素和svg)会将其标识为在div元素外单击。不确定如何解决它。我尝试过使用css技巧，如下所示：
button > * {
pointer-events: none;
}
但它的效果不是很好。
我要做的是什么？
我有一个表单输入元素。在这里面，我有一个带有上下svgs的dropdown输入。因此，当我向下单击svg时，它会将其标识为文档单击。
class Parent extends React.PureComponent {
state = {
op
浏览 0提问于2019-08-27得票数 6
1回答
我正在尝试复制，但是添加了鼠标悬停并单击到创建的链接(svg中的路径)。当我将.on("click")或.on("mouseover")添加到link中时，除了在事件侦听器上之外，它们都不起作用。
我对示例所做的更改是：
link = link
.data(bundle(links))
.enter().append("path")
.each(function(d) {
d.source = d[0], d.target = d[d.length - 1];
})
.attr("class", &
浏览 4提问于2016-07-23得票数 0
我希望显示存储在文件中的SVG映像，并将angularJs ng-click函数绑定到图像。
我尝试过在object/embed元素标记和包装器div标记中放置ng单击绑定，但两者都不起作用。
有人知道怎么做吗？
企图html：
<object ng-click="clickItem()" data="file.svg"></object>
<embed ng-click="clickItem()" src="file.svg/>
<div ng-click="clickItem()&
浏览 2提问于2013-11-16得票数 10
回答已采纳
我想在Angular 4组件中设置svg的动画效果。如何在svg组件中获取不同的I并按顺序对其进行动画处理？
我可以通过单击事件在svg的单个元素上触发单个动画，但如何在页面加载时触发此操作？
我有以下component.ts代码：
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { trigger, state, style, transition, animate, keyframes } from
浏览 1提问于2017-08-02得票数 0
我试图用一个角度指令来创建一个d3图表。我设法创建它，但问题是，我想要一些ng单击事件的图表元素，我不太确定这应该如何做。
以下是我的指示：
.directive('circleChart', function($parse, $window, $compile) {
return {
restrict: 'A',
scope: {
datajson: '='
},
link: function(scop
浏览 1提问于2015-05-05得票数 5
回答已采纳
1回答
我在圆圈周围有多个SVG。问题是，每个SVG都重叠其先前的同级SVG，这将导致单击事件以错误的形状触发。从技术上讲，它是正确的，但从用户的角度来看，它是错误的。
浏览 1提问于2018-05-30得票数 0
回答已采纳
我需要添加一个点击事件到图像中的角度组件。我试过了：
<img src="../../assets/add.svg" width="18" height="18" (click)="addItem()">
但这是行不通的。如果像这样把图片放在按钮里面：
<button type="button" class="btn_img" (click)="addItem()">
<img src="../../assets/add.svg"
浏览 0提问于2018-07-28得票数 5
我有一个screen元素，我需要在屏幕上拖动它。问题是它在快速拖动时不起作用。我在中发布了代码。
中的示例解决了JQuery中的问题。我将解决方案调整为SVG，但它不起作用。有什么想法吗？
这是HTML代码：
<svg id="svg" width="800" height="800" style="border: 1px dashed black;"
onmousemove="move(evt)" onmouseup="endMove(evt)" onmouseout="endMov
浏览 2提问于2014-05-08得票数 2
回答已采纳
我使用d3对svg元素做了一个put单击监听器：
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" id="a">
<circle cx="50" cy="50" r="40" stroke="blac
浏览 3提问于2016-07-10得票数 5
回答已采纳
我想在div之外的任何地方单击以隐藏它。
我有一个svg背景，在它上面有一个带有节点的图。
我点击我的SVG上的一个节点(圆圈)，如果点击这个特殊的‘额外’节点，我会出现一个框，我会显示如下框：
d3.select('#rightBox')
.attr('hidden', null);
d3.select('#leftBox')
.attr('hidden', null);
d3.select('#headerDiv')
.attr('hidden', null)
d3.select
浏览 1提问于2018-09-12得票数 1
2回答
假设我在可点击的容器中有一个按钮 <div class="container" (click)="onContainerClick()">
<button (click)="onButtonClick()">Button</button>
</div> 当我点击按钮时，onContainerClick和onButtonClick都会被触发。有没有办法在容器内只触发按钮的click事件？ 示例：https://stackblitz.com/edit/angular-mekd2t
浏览 13提问于2019-12-09得票数 3
1回答
我有一个WidgetsModule，在这里我创建了一个输入组件
input.component.ts
import { AfterViewInit, Component, Input, OnInit, Output, ViewChild } from '@angular/core';
@Component({
selector: 'app-input',
templateUrl: './input.component.html',
styleUrls: ['./input.component.css']
})
exp
浏览 4提问于2022-04-30得票数 0
回答已采纳
1回答
图像缺少磁贴和svg
、、、
我使用的是Html2Canvas和leaflet。当我向左、向右、向上或向下平移地图，然后导出时，我得到的图像中缺少瓷砖。此外，我的覆盖不再在那里。但如果我不平移，我会得到我的覆盖。这是一张丢失的瓷砖的照片。
有没有人知道如何纠正这个问题？
以下是我的代码
//CSS
/* Map */
#map {
height: 440px;
}
//HTML
<div id="map"></div>
<div id="exportDiv">
<button id="btnClickHere"
浏览 4提问于2015-04-30得票数 0
当我在按钮上创建一个单击事件侦听器时，如果在按钮内单击SVG，则事件目标是<use xlink:href="#star-filled"></use>，而不是注册到单击事件的元素。
如何防止它将子元素捕获为目标元素？
<button type="button" class="rp-form-rating-btn">
<svg class="rp-star-icon rp-star-four" data-rating="4">
<use xlink:h
浏览 1提问于2020-08-25得票数 3
回答已采纳
1回答
我对SVG的分层和事件有问题。
示例：
app.component.ts
import { Component, VERSION } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<svg xmlns="http://www.w3.org/2000/svg" height="400px" width="400px">
<rect x="30" y="30" w
浏览 3提问于2021-11-15得票数 0
回答已采纳
1回答
Vue组件事件处理
、、、
我有一个组件按钮，我在我的网站上几乎所有地方都使用这个按钮。
这是一个带有悬停动画的SVG按钮。按钮工作正常。
<template>
<a class="button"
@mouseover="buttonEnter"
@mouseout="buttonLeave">
<svg viewBox="0 0 180 60">
<path ref="btnPath" d="..." />
</svg>
<s
浏览 32提问于2019-03-21得票数 0
回答已采纳
我正在使用angularjs创建一个日志查看器，它必须在IE10中工作。
每个列表项都有折叠的详细信息。单击SVG图标将展开详细信息。
HTML的一部分，使用和不使用angularjs来更改图标：
<!DOCTYPE html>
<html>
...
<body data-ng-app="listViewer">
<div>
<svg width="0" height="0">
<defs>
<mask
浏览 0提问于2016-01-14得票数 2
我有一个需要捕获mousedown事件的svg元素。下面是代码。
//code snippet...
<g onMouseDown={this.clickHandler}>
<circle ...></circle>
<text> </text>
</g>
click处理程序的代码就是这样简单。
clickHandler() {
alert("mouse down")
}
onMouseUp和OnClick工作正常，但onMouseDown工作不正常
在SVG之外工作正常的相同on
浏览 184提问于2018-12-12得票数 4
回答已采纳
我想要反应性地调用一个自定义的bootstrap popover组件，用户在整个页面中悬停在该组件上的svg就是基于它的。它由以下方式调用： <template>
<popover v-if="node != null">
<template #content>
Reached
</template>
<template #caller>
{{node}}
</template>
</popover>
浏览 97提问于2021-07-08得票数 0
我有一个简单的SVG，它包含一个三角形，点击时切换它的填充颜色：
const toggleFill = (element) => {
if (element.style.fill === 'silver') {
element.style.fill = 'grey';
} else {
element.style.fill = 'silver';
}
};
const svg = document.querySelector('svg');
svg.addEventListener('
浏览 5提问于2022-09-29得票数 1
回答已采纳
1回答
一页多svg的D3点击事件
、、、、
我有一个网页与两个svg插入通过D3.js。我可以将click事件添加到svg中，并将其直接附加到正文中。然而，我在第一个svg之上有另一个“浮动”div，在那里我附加了另一个svg。当尝试添加单击事件时，它们不会触发。
我也尝试过跟踪鼠标位置，但这只适用于附加到正文的svg。
有没有一种方法可以将点击监听器分配给位于“浮动”rect中的div？
这里有我的小提琴：
我正在尝试，当单击页面顶部的rect时，将颜色从黑色改为白色，反之亦然。这怎么可能呢？
我也尝试过Jquery方法。
请注意，如果您将鼠标移动到第二个svg上，您实际上可以拖拽和放大第一个svg，这也是不受欢迎的行为。
浏览 29提问于2017-02-13得票数 0
回答已采纳
这里是AngularJS noob。
我希望我的应用程序能够响应url散列。所谓响应，我指的是简单的东西，比如设置一个变量值。
在本例中，如果url是http:example.com/#parents-to-be，，我希望应用程序执行标准行为，即滚动到#parents-to-be，，并设置$scope.tab3 = 1;
从一些研究来看，这似乎可以通过$location.hash()和$anchorScroll().的结合来实现。然而，到目前为止，我还没有取得成功。有人能帮忙吗？
html：
<div ng-app="bug">
<div ng-con
浏览 2提问于2014-10-09得票数 0
我有一个使用observable的组件，它调用一个服务来进行API调用。API返回一些在视图中呈现的HTML。 HTML如下所示： <p>abc</p><a href=\"http://abc.xyz.com/\" class=\"external-link\" rel=\"nofollow\">
Click me to open in new window</a> 在Angular中，有没有办法添加一些JS，使带有“外部链接”类的锚点在新窗口或选项卡中打开？
浏览 10提问于2019-02-12得票数 0
回答已采纳
1回答
如何根据Id移动形状
、、、
我已经写了一个函数来获取点击事件的形状ID。我想根据单击事件检索到的ID在鼠标移动时创建一个形状。
var svg = d3.select("body")
.append("svg")
.attr("width", 800)
.attr("height", 803);
var $stageContainer = $("#content");
var
浏览 2提问于2015-08-08得票数 0
我正在寻找一个事件侦听器来捕捉模态显示事件，像这样在JQuery上，但在Angular 7 $('#modaldemo4').on('shown.bs.modal', function () {
$('#modalCloser').trigger('click')
}) 我试过了，但没有效果。 this.modaldemo4.nativeElement.addEventListe
浏览 11提问于2019-08-27得票数 0
回答已采纳
3回答
我需要一些关于Angular2 RC1 web应用程序中外部变化的DOM的帮助。场景很简单:我确实有一个组件，其中包含一个带有ID的空div，如下所示
<div id="my-svg-canvas"></div>
类型化组件有一个ngOnInit方法，该方法从普通JS文件中触发一个函数，该文件通过index.html中的脚本标记包含。该函数将SVG呈现到上面列出的"div“标记中。SVG包含一些带有单击指令的a-元素，这些指令引用了组件中的几个方法。
在SVG完全编写之后调用$scope.$apply()之后，这在当时的$scope.$apply
浏览 0提问于2016-05-27得票数 3
回答已采纳
2回答
我正试着把d3和角结合起来。我已经设置了以下d3模块：
angular.module('DTBS.d3', [])
.factory('d3Service', ['$document', '$q', '$rootScope',
function($document, $q, $rootScope) {
var d = $q.defer();
function onScriptLoad() {
// Load client in the browser
浏览 7提问于2015-12-05得票数 1
回答已采纳
与jQuery .on()、SVG xlink和Internet / Safari相结合，我似乎遇到了一个相当令人困惑的问题。
下面是一个简化的例子：
该示例有两个按钮；一个使用svg use，另一个直接嵌入SVG代码。
SVG和按钮是这样的(注意，.icons-svg是第一个，因为如果您尝试在文档的后面添加xlink，那么Safari似乎会变得很悲伤)：
<div class="icons-svg"><svg xmlns="http://www.w3.org/2000/svg"><symbol viewBox="0 0 1
浏览 2提问于2015-07-22得票数 1
1回答
我有一个变量$login，它将包含数据。
public $account;
public $login;
public function getAccountOrder($id)
{
$this->account = Buys::findOrFail($id);
$this->login = $this->account->accounts;
}
public function render()
{
$buys = Buys::where('user_id', auth()->user()->id)->get();
浏览 2提问于2022-02-16得票数 0
回答已采纳
1回答
我想用svg制作一个在角度上使用图表的应用程序，我还发现d3.js在这方面有很大的帮助。但是首先我减少了代码，因为简单的d3.select(.).on(单击)不能正常工作。我对打字也很陌生。
这里是html:
<button id="button1" class="btn btn-success" (click)="onButton1()">
Button 1</button>
<button id="button2" class="btn btn-danger">Button
浏览 0提问于2018-09-11得票数 0
我正在为此而苦苦挣扎，似乎失去了所有的想法。 在angular component中，我从外部资源加载SVG <object type="image/svg+xml" [data]="svgURL"></object> 加载的SVG对象包含如下项目： <g onclick="onClickArea(evt,'3')></g> 所以当我点击SVG的特定区域时，我得到了错误： 0276a76ee45640eba80002580a126a38:158 Uncaught ReferenceErr
浏览 40提问于2019-04-12得票数 3
3回答
我正在开发一个以交互式地图为中心的角度应用程序，它是作为SVG图像提供的。地图上的某些区域将有热点，我可以单击这些热点来触发某些事件，例如，当我单击某个位置标记时，会放大到某个部分。
但是，鼠标事件不起作用。我可以在TypeScript中更改SVG的属性(例如，更改SVG视图框以进行摇摄和缩放，或者在事件发生时用红色高亮显示标签)，但我不能触发SVG本身内的任何单击、滚动、悬停等事件。
到目前为止，我已经尝试过：
向SVG添加角事件属性，这显然不是有效的XML，因此浏览器无法解析它以进行呈现；
通过它的ID (我可以)找到元素，然后给它附加一个匿名的onclick函数，但是它永远不会被
浏览 0提问于2019-06-14得票数 1
回答已采纳
我在jquery中使用一些开关来添加/删除类：
当用户单击它时，我需要切换一些图像：
<div class="col-6 text-right mb-3">
<span class="hover-it cursor-pointer">
<img class="off-hover unliked-116" src="/asset/img/pictogramme/LIKE - LIGHT.svg" alt="like" hei
浏览 5提问于2021-03-13得票数 0
回答已采纳
1回答
我使用Framework7，并希望在元素对用户可见时使用jQuery.appear来运行脚本。这对普通HTML中的代码非常有用：
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></s
浏览 3提问于2016-11-18得票数 0
2回答
如何在JQuery中动态启动UI对话框的OnClick事件？
每个SVG-rect元素(1,2，...,1000)都应该能够打开这个对话框，同时还应该提交一个参数或ID来标识哪个svg被单击了。
相关的JS代码如下所示：
$(function() {
$( "#request_1" )
.click(function() {
createForm();
$( "#dialog-form" ).dialog( "open" );
});
/*....*/
浏览 0提问于2013-03-14得票数 2
回答已采纳
3回答
我试图获得svg图像路径的id，但它不起作用，在DOM就绪上，我已经在文档就绪上尝试过了，我有tried.How可以完成它，我从这个url 中使用了svg映像(NewTux.svg)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="main_wrapper">
<object type="image/svg+xml" data="NewTux.svg">Your browser does no
浏览 5提问于2015-03-19得票数 1
回答已采纳
这可能是一个简单的问题，但我正在更新一些旧的AngularJS代码，我的知识有点生疏。
如果我有一个AngularJS指令，如下所示：
如你所见，我在里面有一个重新加载的方法。无论如何，我可以从控制器代码中调用该方法吗？
我知道您可以在作用域对象中添加方法绑定，但这是为了调用指令。
scope: {
reload: '&'
}
我如何做到这一点，以便控制器调用指令方法？
指令：
(function () {
'use strict';
var myDirective= function () {
var vm
浏览 2提问于2022-03-15得票数 0
1回答
d3防止鼠标在控件菜单上的触发
、、、、
我在extjs面板中创建了一个SVG。当我右键单击SVG元素时，mouseover事件也会被触发，这会改变SVG，但我希望SVG与右击前一样。这样我就可以将先前的SVG导出到图像中，而不是修改后的SVG。
下面是我的示例代码：
var path = this.svg.selectAll("path")
.data(partition.nodes(dataset))
.enter().append("path")
.attr("d", arc)
.style("stroke&#
浏览 4提问于2016-05-13得票数 0
回答已采纳
我正在包装一个D3 svg图像在一个角度的指令。当用户单击该D3映像时，我希望在控制器中将一个变量设置为true，这样ng显示就会显示另一个D3映像。
我所做的是向.on("click")映像中添加一个D3函数，并在该函数中使用$rootScope.$emit()发送一个事件。在第二个图像的控制器中，我有一个$rootScope.$on()来缓存事件，并将ng-show的变量设置为true。
这种方法行不通。我已经测试了代码，以确保事件被发送并正确捕获，但是ng显示没有显示第二个D3映像。
为什么会这样呢？
我创造了一个小的柱塞来说明我想要做什么。。
控制器代码如下：
func
浏览 2提问于2015-08-27得票数 1
回答已采纳
1回答
目前，我有一个SVG，其中包含多个容器，即多个较小的svg，它根据json数据中的组数呈现。如果json中有5组数据，那么将有5个较小的多个容器放入该外部svg中。
此外，如果一个容器被放大，其他容器应该反映相同的缩放行为，并且应该同步。这将在散点图和多线图上实现。
当前的问题是，多个容器按需要呈现，但在放大行为时唯一的最后一个容器是正确的。在其他容器上，当调用缩放函数时，缩放行为是不正确的，即认为它是一个散点图，缩放上的气泡和轴不放大或缩小。
1)假设其他容器中的轴选择正确，如何将轴放大到其他容器？
2)如何同步所有容器中的缩放行为，而不管我放大哪个容器？
代码：
d3.select
浏览 4提问于2014-09-18得票数 1
1回答
这是ckeditor4-angular中一个元素的源代码，我想附加click事件来实现自定义功能 <div class="fractional-block" id="fractional-block"><span>5</span><svg height="5" width="100%"><line stroke="#000" stroke-width="2" x1="0" x2="100%" y1="0&
浏览 43提问于2020-09-30得票数 0
是否有一种在其他元素后面的SVG元素上触发mouseenter事件的方法？看起来顶部的元素正在捕捉事件，而不是在冒泡DOM。
或者，是否有一种检查鼠标是否位于特定SVG元素之上的好方法？
为了澄清，我正在尝试实现一个类似于拖放的功能，在这个功能中，我会根据后面的元素更改前面的元素。注意，元素不是嵌套的。
浏览 5提问于2014-02-17得票数 3
回答已采纳
在我正在做的一个项目中，我们创建了一些SVG地图。我们有一个系统，在这个系统中，我们可以从我们的数据库中获取地图上某个特定位置的信息。当单击相关多边形时，我正在努力使UI引导工具提示出现。然而，我发现了两种不起作用的方法。
第一种方法不能工作，只需在总体元素上设置一个指令，而是设置一个系统来绑定指令的link函数中的元素，如下所示：
(function () {
'use strict';
angular.module('app').directive('locationMap', [directive]);
func
浏览 0提问于2015-03-31得票数 1
回答已采纳
2回答
我正在做一个从AngularJS到Angular8的迁移项目
在那里我发现了这个代码
// get the pattern from SVG document and set the stroke color
var patternElt = $scope.svgDocument.find("#striped");
patternElt.css("fill", color);
// apply the striped class to the element
element.css("fill", "url(#striped)&#
浏览 4提问于2022-02-08得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
