如何使用Javascript在SVG中绘制不可缩放的圆圈 [英] How to draw non-scalable circle in SVG with Javascript

问题描述

我正在开发一个地图，在Javascript中使用SVG绘制线条。

I'm developing a map, in Javascript using SVG to draw the lines.

我想添加一个可以搜索道路的功能，如果找到了这条路，地图上会出现一个圆圈。

I would like to add a feature where you can search for a road, and if the road is found, a circle appears on the map.

我知道我可以在SVG中绘制一个圆圈，但我的问题是，圆圈的大小应该是不会根据缩放级别而改变。换句话说，圆圈必须始终具有相同的尺寸。
我地图上的道路有这个功能，我所要做的就是添加

I know i can draw a circle in SVG, but my problem is that, the size of the circle should not change depending on the zoom-level. In other words the circle must have the same size at all times. The roads on my map have this feature, all i had to do was add

vector-effect="non-scaling-stroke"

到行属性..

一条线看起来像这样。

<line vector-effect="non-scaling-stroke" stroke-width="3" id = 'line1' x1 = '0' y1 = '0' x2 = '0' y2 = '0' style = 'stroke:rgb(255,215,0);'/> 

圆圈看起来像这样。

<circle id = "pointCircle" cx="0" cy="0" r="10" stroke="red" stroke-width="1" fill = "red"/>

是否有可能以某种方式将圆圈定义为不缩放？

Is it possible to define the circle as "non-scaling" somehow?

推荐答案

我花了一段时间，但我终于把数学弄干了。此解决方案需要三件事：

It took me a while, but I finally got the math clean. This solution requires three things:

1. 包含此脚本（以及SVGPan.js脚本），例如
   
   < script xlink：href =SVGPanUnscale.js >< / script>


2. 确定您不想扩展的项目（例如，将它们放入具有特殊类别或ID的组中，或放入每个元素上的特定类）然后告诉脚本如何找到这些项，例如
   
   unscaleEach（g.non-scaling> *，circle.non-scaling ）;


3. 使用 transform =translate（...，...）放置每个图中的元素，不 cx =...cy =...。

1. Include this script in your page (along with the SVGPan.js script), e.g.
   <script xlink:href="SVGPanUnscale.js"></script>
2. Identify the items you want not to scale (e.g. place them in a group with a special class or ID, or put a particular class on each element) and then tell the script how to find those items, e.g.
   unscaleEach("g.non-scaling > *, circle.non-scaling");
3. Use transform="translate(…,…)" to place each element on the diagram, not cx="…" cy="…".

只需使用这些步骤，使用SVGPan进行缩放和平移不会影响标记元素的缩放（或旋转或倾斜）。

With just those steps, zooming and panning using SVGPan will not affect the scale (or rotation, or skew) of marked elements.

// Copyright 2012 © Gavin Kistner, !@phrogz.net
// License: http://phrogz.net/JS/_ReuseLicense.txt

// Undo the scaling to selected elements inside an SVGPan viewport
function unscaleEach(selector){
  if (!selector) selector = "g.non-scaling > *";
  window.addEventListener('mousewheel',     unzoom, false);
  window.addEventListener('DOMMouseScroll', unzoom, false);
  function unzoom(evt){
    // getRoot is a global function exposed by SVGPan
    var r = getRoot(evt.target.ownerDocument);
    [].forEach.call(r.querySelectorAll(selector), unscale);
  }
}

// Counteract all transforms applied above an element.
// Apply a translation to the element to have it remain at a local position
function unscale(el){
  var svg = el.ownerSVGElement;
  var xf = el.scaleIndependentXForm;
  if (!xf){
    // Keep a single transform matrix in the stack for fighting transformations
    // Be sure to apply this transform after existing transforms (translate)
    xf = el.scaleIndependentXForm = svg.createSVGTransform();
    el.transform.baseVal.appendItem(xf);
  }
  var m = svg.getTransformToElement(el.parentNode);
  m.e = m.f = 0; // Ignore (preserve) any translations done up to this point
  xf.setMatrix(m);
}

演示代码

Demo Code

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Scale-Independent Elements</title>
  <style>
    polyline { fill:none; stroke:#000; vector-effect:non-scaling-stroke; }
    circle, polygon { fill:#ff9; stroke:#f00; opacity:0.5 }
  </style>
  <g id="viewport" transform="translate(500,300)">
    <polyline points="-100,-50 50,75 100,50" />
    <g class="non-scaling">
      <circle  transform="translate(-100,-50)" r="10" />
      <polygon transform="translate(100,50)" points="0,-10 10,0 0,10 -10,0" />
    </g>
    <circle class="non-scaling" transform="translate(50,75)" r="10" />
  </g>
  <script xlink:href="SVGPan.js"></script>
  <script xlink:href="SVGPanUnscale.js"></script>
  <script>
    unscaleEach("g.non-scaling > *, circle.non-scaling");
  </script>
</svg>

这篇关于如何使用Javascript在SVG中绘制不可缩放的圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！