[英]How to scale different svg layers on hover using Snap.svg and Angular 5
我是SVG的超级菜鸟,所以请多多包涵(并在我做错事情的地方随时纠正我)。 我的应用程序是在Angular 5中构建的。我正在使用一个复杂的SVG,它具有大约23层。 这是因为它是一个具有表示各种输入的框的图形,并且每个框都必须在hover
或click
缩放,以向用户指示他/她正在选择相应的框。
在尝试通过简单的CSS转换(缩放,转换)实现缩放后,我意识到svg矩阵和缩放将需要我更多的研究和理解,因此决定尝试Snap.svg
,我读到的该文非常善于简化使用svgs。
因此,现在我的Angular 5组件如下所示:
import { Component, OnInit } from '@angular/core';
declare const Snap: any;
@Component({
...
export class SvgComponent implements OnInit {
constructor(){
}
ngOnInit(){
}
onHover(event) {
const layer = Snap(event.target.id);
layer.hover(function() {
this.animate({ transform: 's1.5,1.5' }, 500);
}, function() {
this.animate({ transform: 's1,1' }, 500);
});
}
HTML看起来像这样(其中一层):
<svg:g style="display:inline" class="svg-layer" id="layer1" (hover)="onHover($event)">
<svg:g id="g4746" style="display:inline" transform="matrix(0.26458333,0,0,0.26458333,-13.055467,-56.894235)">
<svg:path
id="path3892"
d="m 396.86667,292.53333 c -4.59211,0 -9.16503,0.1345 -13.7,0.36667 -4.53498,0.23217 -9.06106,0.57462 -13.53334,1.03333 -4.03511,0.41387 -8.02024,0.93941 -12,1.53334 -6.98255,23.42835 -10.71331,47.22459 -12.26666,71.16666 3.73406,-1.00536 7.41654,-2.14453 11.23333,-2.93333 6.49856,-1.34304 13.12148,-2.34492 19.83333,-3.03333 6.71185,-0.68842 13.54166,-1.06667 20.43334,-1.06667 6.89168,0 13.68815,0.37825 20.4,1.06667 6.71185,0.68841 13.33477,1.69029 19.83333,3.03333 3.82739,0.791 7.52247,1.92458 11.26667,2.93333 -1.55336,-23.94207 -5.28412,-47.73831 -12.26667,-71.16666 -3.99047,-0.59604 -7.98719,-1.11834 -12.03333,-1.53334 -4.47228,-0.45871 -8.99836,-0.80116 -13.53334,-1.03333 -4.53497,-0.23217 -9.07456,-0.36667 -13.66666,-0.36667 z"
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:'Bitstream Vera Sans';-inkscape-font-specification:'Bitstream Vera Sans';text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#ffffb1;fill-opacity:1;stroke:#000000;stroke-width:2.13333344;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none;enable-background:accumulate" />
<svg:text
id="text3897"
y="333.54636"
x="396.53268"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.80000019px;line-height:0%;font-family:Tahoma;-inkscape-font-specification:Tahoma;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.06666672"
xml:space="preserve"><tspan
id="tspan3311"
x="396.53268"
y="333.54636"
style="font-size:14.9333334px;line-height:1.25;stroke-width:1.06666672">sereniteit</tspan></svg:text>
</svg:g>
所以我得出以下结论:
OnInit
(我首先做过)不会使第一层(即layer1
)动画。 因为它只被触发一次,所以这是有道理的。 hover
)或( mouseover
)或其他任何事件绑定在置于svg
标记内似乎均不起作用。 作为参考,我阅读并实现了本文中的一些想法: https : //teropa.info/blog/2016/12/12/graphics-in-angular-2.html#namespacing-svg-elements很好,但显然要提到事件绑定在Angular 2中有效。也许在此期间发生了一些变化,现在事件绑定不再起作用。 任何想法都非常受欢迎,因为我现在很困惑。
以后的编辑:所以Angular 2+确实支持事件绑定(只要给它正确的事件名称,显然-“悬停”不存在)。 悬停的相应事件名称是(mouseenter)和(mouseleave)。 如果将它们附加到svg标签,它们将起作用。
您应该仅使用CSS就能完成您想做的事情。
以下将适用于现代浏览器版本。 如果需要支持较旧的浏览器,则可能需要做更多的工作。
.svg-layer { transform-box: fill-box; transform-origin: 50% 50%; transition: 0.2s transform; transform: scale(1,1); } .svg-layer:hover { transform: scale(1.5,1.5); }
<svg width="300" height="300" viewBox="60 10 60 60"> <g style="display:inline" class="svg-layer" id="layer1"> <g id="g4746" style="display:inline" transform="matrix(0.26458333,0,0,0.26458333,-13.055467,-56.894235)"> <path id="path3892" d="m 396.86667,292.53333 c -4.59211,0 -9.16503,0.1345 -13.7,0.36667 -4.53498,0.23217 -9.06106,0.57462 -13.53334,1.03333 -4.03511,0.41387 -8.02024,0.93941 -12,1.53334 -6.98255,23.42835 -10.71331,47.22459 -12.26666,71.16666 3.73406,-1.00536 7.41654,-2.14453 11.23333,-2.93333 6.49856,-1.34304 13.12148,-2.34492 19.83333,-3.03333 6.71185,-0.68842 13.54166,-1.06667 20.43334,-1.06667 6.89168,0 13.68815,0.37825 20.4,1.06667 6.71185,0.68841 13.33477,1.69029 19.83333,3.03333 3.82739,0.791 7.52247,1.92458 11.26667,2.93333 -1.55336,-23.94207 -5.28412,-47.73831 -12.26667,-71.16666 -3.99047,-0.59604 -7.98719,-1.11834 -12.03333,-1.53334 -4.47228,-0.45871 -8.99836,-0.80116 -13.53334,-1.03333 -4.53497,-0.23217 -9.07456,-0.36667 -13.66666,-0.36667 z" style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:'Bitstream Vera Sans';-inkscape-font-specification:'Bitstream Vera Sans';text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#ffffb1;fill-opacity:1;stroke:#000000;stroke-width:2.13333344;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none;enable-background:accumulate" /> <text id="text3897" y="333.54636" x="396.53268" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.80000019px;line-height:0%;font-family:Tahoma;-inkscape-font-specification:Tahoma;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.06666672" xml:space="preserve"><tspan id="tspan3311" x="396.53268" y="333.54636" style="font-size:14.9333334px;line-height:1.25;stroke-width:1.06666672">sereniteit</tspan></text> </g> </g> </svg>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.