如何缩放所有的东西,除了一些路径/文本在svg画布上,而不改变其确切位置
How to zoom all things except some paths / text on an svg canvas without changing its exact position
我想在svg画布上缩放所有东西,除了一些路径/文本,而不改变使用svgpanzoom js的路径/文本确切位置。我需要的实际工作就像一张地图上有一些标记,我也想动态地放置新的大头针或标记…
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="640px" height="480px" viewBox="0 0 640 480">
<g id="viewport">
<rect x="27" y="33" fill="#14A0E8" width="134" height="134"/>
<rect x="27" y="167" fill="#8ABB50" width="134" height="134"/>
<rect x="161" y="231" fill="#F97659" width="134" height="134"/>
<rect x="295" y="167" fill="#14A0E8" width="134" height="134"/>
<rect x="57" y="365" fill="#8ABB50" width="372" height="57"/>
<rect x="161" y="33" fill="#CCCC99" width="134" height="134"/>
<rect x="429" y="33" fill="#F97659" width="134" height="134"/>
<rect x="429" y="301" fill="#F97659" width="134" height="64"/>
<rect x="429" y="202" fill="#CCCC99" width="134" height="64"/>
<g class="noZoom">
<path d="M103.912,213.845c0,5.248-6.218,9.378-9.502,14.649c-4.293-5.507-9.501-9.401-9.501-14.649s4.254-9.501,9.501-9.501
S103.912,208.598,103.912,213.845z"/>
<circle fill="#FFFFFF" cx="94.548" cy="212.497" r="3.349"/>
</g>
<g class="noZoom">
<path d="M480.912,334.846c0,5.247-6.219,9.378-9.502,14.648c-4.293-5.508-9.502-9.401-9.502-14.648
c0-5.248,4.254-9.502,9.502-9.502C476.657,325.344,480.912,329.598,480.912,334.846z"/>
<circle fill="#FFFFFF" cx="471.548" cy="333.496" r="3.349"/>
</g>
<text class="noZoom" transform="matrix(1 0 0 1 80.1992 240)" font-size="8">Marker 1</text>
<text class="noZoom" transform="matrix(1 0 0 1 459.1992 359.5)" font-size="8">Marker 2</text>
<text class="noZoom" transform="matrix(1 0 0 1 201.1992 204.3438)" font-size="8">Some Information</text>
<text class="noZoom" transform="matrix(1 0 0 1 325.6992 274.3438)" font-size="8">Some Another Information</text>
</g>
</svg>
上面显示的是一个svg的例子,看起来像我试图缩放svg中的所有内容,但标记和文本应该在同一位置,而不增加其缩放级别
我使用的是svgpanzoom
我通过向onZoom
事件添加侦听器做了类似的事情。在这个侦听器中,我根据比例因子增加了文本元素的字体大小和路径的笔画宽度。另一种方法是对noZoom
元素有单独的组,并收听onPan
事件,在那里您可以获得新的x和y平移并调用getZoom
以获得新的CTM,并作为结果更改每个noZoom
元素的坐标。
您可以缩放一个组元素。您可以在其中放置任何您想要的元素。文档。演示。
相关文章:
- 通过键盘编写SVG文本
- 将指针事件限制为SVG文本填充
- 如何添加 SVG 文本标记 从 JavaScript 函数返回的值
- 如何在javascript中使用svg文本标签
- 在鼠标悬停d3js上更改SVG文本的文本
- 使用d3.js删除svg文本元素
- 用javascript获取svg文本值
- svg文本居中异常
- 用逗号增加svg文本
- SVG文本锚点设置使文本元素移动
- Svg文本元素被另一个Svg元素重叠
- D3.js-围绕一个点旋转svg文本
- 如何查找 SVG 文本位置
- SVG 文本路径 - 动画开始偏移量(文本向下滑动 SVG 路径) - 在 JS 中
- 递增 SVG 文本区域中的 % 值
- 如何在javascript中换行svg文本
- 避免在拖动时跳转带有文本锚点的 SVG 文本
- D3JS SVG 文本和形状在同一行上
- 将省略号放在反应 svg 文本组件上
- 允许 SVG 文本在角度中可编辑