个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在处理一个包含 SVG 文件的对象元素。这是一张 map 。每个路径都有相同的默认颜色，但是当 mouseenter 触发时，我想用相同的颜色值更改它，但我不想为所有城市手动执行此操作。我怎样才能动态地做到这一点？
一些 SVG 代码
<g id="haritaContainer" fill-rule="evenodd" sketch:type="MSPage" fill="none">
<g id="harita" transform="translate(-62 -236)" sketch:type="MSLayerGroup">
<g id="layerSinir" sketch:type="MSShapeGroup" transform="translate(522.55 367.66) rotate(-16) translate(-472 -246.5)">
<g id="gAvrupaYakasi" transform="translate(0)">
<g id="pathCatalca" transform="translate(367 361)">
<g id="path-9-link" stroke="#000" fill="url(#linearGradient-2)">
<path id="path-2" d="m3.1251 12.527l-2.534-0.451 1.0042 2.361 11.848 7.894 5.646 3.911 1.074 2.287 9.906 0.857 3.841-1.58 4.464-9.297 8.158-0.379 2.607 2.622 9.097-6.666 0.471-9.6981-0.341-3.7527-18.083 6.3636-15.123-1.1055-3.857-3.4886-2.645-0.9563-2.489 0.0734-2.05 1.8655 2.567 8.0667-4.346-2.6964-3.8735 2.0204-4.982-0.9107-0.3594 2.6597z"/>
</g>
<path id="path-2" d="m3.1251 12.527l-2.534-0.451 1.0042 2.361 11.848 7.894 5.646 3.911 1.074 2.287 9.906 0.857 3.841-1.58 4.464-9.297 8.158-0.379 2.607 2.622 9.097-6.666 0.471-9.6981-0.341-3.7527-18.083 6.3636-15.123-1.1055-3.857-3.4886-2.645-0.9563-2.489 0.0734-2.05 1.8655 2.567 8.0667-4.346-2.6964-3.8735 2.0204-4.982-0.9107-0.3594 2.6597z"/>
</g>
<g id="pathBuyukcekmece" transform="translate(220 281)">
<g id="path-3-link" stroke="#000" fill="url(#linearGradient-3)">
<path id="path-3" d="m42.807 88.941l-2.531-2.424-10.733-5.648-2.207-3.075-11.535-6.462-3.34-2.922-0.47-2.922-11.834-6.678 3.291-7.003 1.9851 0.218 4.0852-4.11 3.7647 6.171 2.318-0.256 1.96-6.798-1.96-1.178-0.192-2.33-1.754-3.073-0.013-0.025-0.499-5.25 2.125-10.357 1.96-0.909-2.446-3.648-0.231-8.898 1.063-1.831 2.024 2.663 1.857-0.538-1.025-1.8306 3.15-4.7241 7.223 11.113 6.557-2.855 3.33 2.112 3.342-2.214 5.43 6.926 6...............
JAVASCRIPT 代码
var haritasvg = document.getElementById('haritasvg')
haritasvg.addEventListener("load",function(){
var svgDoc = haritasvg.contentDocument
/* İLÇE LİSTESİ ------------ */
var pathCatalca = svgDoc.getElementById('pathCatalca')
/* İLÇE FONKSİYONLARI ------ */
/*çatalca mouseenter*/
pathCatalca.addEventListener("mouseenter",function(){
var catalcaInner = $(this).find('#path-9-link')
catalcaInner.attr('fill','url(#redGradient)')
$(this).css('cursor','pointer')
},false);
/*çatalca mouseleave*/
pathCatalca.addEventListener("mouseleave",function(){
var catalcaInner = $(this).find('#path-9-link')
catalcaInner.attr('fill','url(#linearGradient-2)')
},false);
})
最佳答案
我假设所有“城市”的 ID 都类似于 path-number-link
重新阅读问题 - 忽略之前的“风格”建议:D
var haritasvg = document.getElementById('haritasvg');
haritasvg.addEventListener("load",function() {
var svgDoc = haritasvg.contentDocument;
var pathCatalca = svgDoc.getElementById('pathCatalca');
var mouser = (function() {
var saveOldFill = {};
return function (e) {
var fill;
if (e.target && e.target.id && /^path-\d+-link$/.test(e.target.id)) {
if (e.type == 'mouseenter') {
saveOldFill[e.target.id] = e.target.fill;
fill = 'url(#redGradient)';
e.style.cursor = 'pointer';
}
else {
fill = saveOldFill[e.target.id];
}
e.target.fill = fill;
}
}
}());
svgElement.addEventListener('mouseenter', mouser);
svgElement.addEventListener('mouseleave', mouser);
});
关于javascript - 当 mouseenter 触发时，在 <object> 标记内的选定 SVG 中添加属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33649711/
25
4
0
我遵循了一本名为“Sitepoint Full Stack Javascript with MEAN”的书中的教程，我刚刚完成了第 6 章，应该已经创建了一个带有“数据库”的“服务器”。数据库只不过是
在 Jquery 中，我创建两个数组，一个嵌入另一个数组，就像这样...... arrayOne = [{name:'a',value:1}, {name:'b',value:2}] var arra
这个问题在这里已经有了答案: What is the explanation for these bizarre JavaScript behaviours mentioned in the 'Wa
我被放在别人的代码上，有一个类用作其他组件的基础。当我尝试 ng serve --aot(或 build --prod)时，我得到以下信息。 @Component({ ...,
我正在测试一些代码，并使用数据创建了一个 json 文件。 问题是我在警报中收到“[object Object],[object Object]”。没有数据。 我做错了什么？ 这是代码:
我想打印 [object Object],[object Object] 以明智地 "[[{ 'x': '1', 'y': '0' }, { 'x': '2', 'y': '1' }]]"; 在 ja
我有一个功能 View ，我正在尝试以特殊格式的方式输出。但我无法让列表功能正常工作。 我得到的唯一返回是[object Object][object Object] [object Object]
在使用优秀的 Sim.js 和 Three.js 库处理 WebGL 项目时，我偶然发现了下一个问题: 一路走来，它使用了 THREE.Ray 的下一个构造函数: var ray = new THRE
我正在使用 Material UI 进行多重选择。这是我的代码。 {listStates.map(col => (
我的代码使用ajax: $("#keyword").keyup(function() { var keyword = $("#keyword").val(); if (keyword.
我遇到了下一个错误，无法理解如何解决它。 Can't resolve all parameters for AuthenticationService: ([object Object], ?, [o
我正在尝试创建一个显示动态复选框的表单，至少应选中其中一个才能继续。我还需要获取一组选中的复选框。 这是组件的代码: import { Component, OnInit } from '@angul
我正在开发 NodeJs 应用程序，它是博客应用程序。我使用了快速验证器，我尝试在 UI 端使用快速闪存消息将帖子保存在数据库中之前使用闪存消息验证数据，我成功地将数据保存在数据库中，但在提交表单后消
我知道有些人问了同样的问题并得到了解答。我已经查看了所有这些，但仍然无法解决我的问题。我有一个 jquery snipet，它将值发送到处理程序，处理程序处理来自 JS 的值并将数据作为 JSON 数
我继承了一个非常草率的项目，我的任务是解释为什么它不好。我注意到他们在整个代码中都进行了这样的比较 (IQueryable).FirstOrDefault(x => x.Facility == fac
我只是在删除数组中的对象时偶然发现了这一点。 代码如下: friends = []; friends.push( { a: 'Nexus', b: 'Muffi
这两个代码片段有什么区别: object = nil; [object release] 对比 [object release]; object = nil; 哪个是最佳实践？ 最佳答案 object
我应该为其他人将从中继承的第一个父对象传递哪个参数，哪个参数更有效 Object.create(Object.prototype) Object.create(Object) Object.creat
我在不同的对象上安排不同的选择器 [self performSelector:@selector(doSmth) withObject:objectA afterDelay:1]; [self per
NSLog(@"%p", &object); 和 NSLog(@"%p", object); 有什么区别？ 两者似乎都打印出一个内存地址，但我不确定哪个是对象的实际内存地址。 最佳答案 这就是我喜欢的
我是一名优秀的程序员,十分优秀！