时间戳

首页 > 解决方案 > 如何使用 Snap.svg 和 Angular 5 在悬停时缩放不同的 svg 图层

javascript - 如何使用 Snap.svg 和 Angular 5 在悬停时缩放不同的 svg 图层

问题描述

我是 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>

所以我得出以下结论：

  1. 实现悬停功能OnInit（我首先做的）不是动画，而是第一层（所以layer1）。这有点道理，因为它只触发了一次。
  2. ( 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 标签，它们就可以工作。

标签： javascripthtmlangularsvg

解决方案

你应该能够只使用 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>

推荐阅读