如何将模式应用于忽略元素变换值的SVG元素？
要将模式应用于忽略元素变换值的SVG元素，可以使用SVG的pattern元素和use元素结合使用。
首先，创建一个pattern元素，定义模式的样式和内容。在pattern元素中，可以使用各种SVG元素和属性来定义模式的图案，例如rect、circle、path等。可以设置填充颜色、边框颜色、透明度等。
接下来，在需要应用模式的SVG元素中，使用use元素引用定义好的模式。将use元素的xlink:href属性设置为模式的ID，即可将模式应用到该元素上。
以下是一个示例代码：
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
<defs>
<pattern id="pattern" width="20" height="20" patternUnits="userSpaceOnUse">
<rect width="20" height="20" fill="red" />
<circle cx="10" cy="10" r="5" fill="blue" />
</pattern>
</defs>
<rect x="50" y="50" width="200" height="200" fill="url(#pattern)" />
</svg>在上述代码中，我们创建了一个名为pattern的模式，它由一个红色的矩形和一个蓝色的圆组成。然后，我们使用rect元素创建了一个矩形，并将模式应用到该矩形上，通过fill属性设置为url(#pattern)。
这样，矩形将以模式的样式进行填充，而不受元素变换的影响。
腾讯云相关产品和产品介绍链接地址：
相关·内容
1回答
第一次学习SVG时，我遇到了<defs>、<g>和<use>。我注意到，每当使用<g>对元素进行分组，然后使用<use>使用时，如果执行旋转，它将应用于整个坐标系。例如，如果先在<use xlink:href="#point" x="105" y="-105" transform="rotate(90 50,50)"/>上执行按90度旋转，然后在x="100"上执行旋转，则svg图像将沿Y轴移动。这在处理许多图像时造成了混乱。有没有什么技巧可以
浏览 3提问于2015-04-12得票数 0
我试图通过运行，但我无法让它生成SVG。它返回div的正确大小，但当您检查元素时，它看起来就像是从屏幕上绘制的路径。
如果我在Illustrator中打开SVG并重新保存，我可以让它工作，但随后我丢失了分组，Raphael绘制了单独的路径，并将组数组保留为空。我真的需要保留大陆组，因为我必须在大陆级别与地图进行交互。
我也使用了不同的拉斐尔生成器，结果是一致的。有谁有什么想法吗？
干杯
浏览 2提问于2012-06-13得票数 2
回答已采纳
我创建了一个只包含1个flowRoot元素的svg document，然后保存了它。然后当我
在visual studio中重新打开该文档时，我在flowRoot元素中看到了一个transform属性。但是我
之前也创建了一些svg文件，当时我没有看到任何这样的属性。这是什么？
属性的含义以及如何摆脱它。我正在使用inkscape来创建svg文档。
浏览 1提问于2012-07-14得票数 0
回答已采纳
1回答
我试图创造一个完整的窗口响应漫画布局与它的内容符合比例。我现在拥有的例子：
<svg height="100%" width="100%" viewBox="0 0 960 560" preserveAspectRatio="none">
我已经将SVG设置为preserveAspectRatio="none“，因此它将填充整个窗口。但我正试图找到一种方法，用更多的SVG图像填充面板，这将再次保持它们自己的比率。
“球”显然会被一些插图所取代，但这只是一个小小的例子。
我甚至不确定使用SVG布局是否真
浏览 1提问于2015-12-12得票数 2
回答已采纳
我很难理解这个例子：
我理解一般概念，图中的所有点都放入svg g-element中，这很有用，因为现在您可以对组应用变换，并相应地缩放所有点。这会转换这些点所在的整个坐标系。但这对于传递用于平移的鼠标坐标并不重要，因为这些坐标来自svg中不可见的rect，它不会被转换。
我不明白的是：
svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("
浏览 6提问于2017-08-09得票数 0
给定此svg：
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<ellipse stroke="#000000" ry="210.999999" rx="259.0
浏览 5提问于2013-02-13得票数 1
回答已采纳
下面的函数在一些圆弧的中间绘制小圆。我想画出从这些圆到其他元素的线。
这就是为什么我需要得到圆的cx/cy值(在它们被旋转之后)。
var drawSmallCircles = function(arcs){
var d=arcs;
var arcRadius=d[0].outer;
var svg = d3.select("svg").append("g")
.attr("transform", "translate(" + width / 4 + "," + height / 2 +
浏览 2提问于2014-08-09得票数 0
我正在尝试根据单击事件放大地图上的不同点。
这是我的代码：
var centered;
var x;
var y;
var zoomLevel;
var zoomSettings = {
duration: 1000,
ease: d3.easeCubicOut,
zoomLevel: 10
};
svg.selectAll("path")
.data(json_data.features)
.enter()
.append("path")
.attr("d", path)
.attr(
浏览 0提问于2018-03-28得票数 0
我有一个包含两个元素的svg，一个标题和一个副标题。副标题嵌套在标题下面。在媒体查询中，我需要从头部向右和向下少量地重新定位副标题。我使用如下所示的代码，但转换不起作用。转换是使用媒体查询的内联样式来完成的。
<div class="logo">
<style>
@media(min-width: 0px){
#subHead{
transform: translate(70px, 70px);
}
}
@media(min-width: 1000px){
#s
浏览 26提问于2019-07-19得票数 1
回答已采纳
2回答
我认为我对SVG有相当好的理解，包括视口、viewBox和用户坐标系。
在下面的第一个示例中，我们使用与视口相同的高宽比的viewBox。正如预期的那样，用户坐标系的旋转不会扭曲任何角度。
在示例2中，我们将viewbox设置为与视口不同的高宽比。换句话说，当将viewBox映射到视口时，形状的高宽比不会被维护。由于坐标系原点在(0,0)，所以右下角不受此缩放的扭曲，这是合理的。
当我们旋转用户坐标系的例子二，然而，下直角是扭曲的。这种情况在示例1中不会发生。
编辑1:只是要明确一点，问题是关于上一个例子中的下直角。旋转前，用viewBox拉伸后，角度为90%。然而，旋转后，它不再是90%。
浏览 0提问于2018-12-07得票数 5
回答已采纳
1回答
也许这是一个愚蠢的问题，但我没有太多这样做的经验。我需要从多边形获得坐标来创建R中的等高线。这是一个复杂的多边形，大约有1000个点，所以手动输入坐标是疯狂的。我还需要提取轮廓内的一些对象的xy位置。我尝试使用Illustrator和Inkscape创建一个包含所有信息的svg文件。考虑到svg文件包含所有信息，这看起来是一个很好的选择。有没有办法从路径或多边形节点中提取坐标？或者有没有其他更简单的方法来完成这个过程？我将非常感谢任何帮助，因为我必须这样做约30张图片。干杯
浏览 0提问于2012-04-13得票数 6
回答已采纳
1回答
如何正确缩放d3图表？
、、、、
我用d3 word云布局做了一个图表。我想使用d3.zoom()对其进行缩放。问题是，当我实现缩放功能时，SVG是越界的。就像这个例子：https://codepen.io/bitbyte/pen/oVKGjx var words = ["two", "two", "seven", "seven", "seven", "seven", "seven", "seven", "seven", "three", "three"
浏览 18提问于2019-03-29得票数 1
回答已采纳
2回答
我在网上搜索了几个材料，但没有一个清楚地说明了这个概念，至少对我来说是这样。例如，w3schools说它定义了一个3D元素从视图中放置了多少像素。它太抽象了，无法完全理解。有没有人能用更生动易懂的方式告诉我？如果有一些图片来展示这个概念，那就再好不过了。
浏览 1提问于2012-04-05得票数 23
回答已采纳
2回答
如何在SVG中获取？具体地说，我正在寻找一种方法来定义SVG对象，这些对象在调整大小时的行为类似于九个切片对象(一些元素保持其尺寸，而另一些元素则随容器缩放)。
浏览 1提问于2012-03-04得票数 7
1回答
我对SVG一无所知。更不用说SVG字体了。但是，我需要在我的web项目中使用它们。
我已经用fontello创建了一个自定义字体，并在文本编辑器中分析了SVG文件的格式。然后，我打开一个用Inkscape创建的SVG文件(另存为普通SVG)，并使用它的d属性在字体中创建一个新的字形。
我不敢相信它真的成功了..。嗯，差不多..。字形显示为垂直翻转。我尝试过在Inskcape中翻转它。但是，当我保存文件时，原始的d属性保持不变。它只是添加了一个带有翻转坐标系的矩阵的transform，但它现在可以在<glyph>标记中工作。
有没有什么方法可以在字体文件或Inkscape中应用此转换
浏览 0提问于2013-07-05得票数 0
回答已采纳
1回答
我正在使用d3版本4创建径向树。预期的用户界面应该是每个径向树节点应该看起来像d4的甜甜圈图表，这应该会显示一些%的值，我添加了预期快照和当前开发快照。任何建议都将是有益的，谢谢。
var data = {
"name": "AirtelApp",
"children": [
{
"name": "airteltopicsOne",
"children": [
{ "name": "air
浏览 8提问于2021-09-17得票数 0
我有以下示例svg：
<svg>
<text x="0" y="10">
<tspan x="0" dy="10">Foo</tspan>
<tspan x="0" dy="10"></tspan> // this is completely ignored
<tspan x="0" dy="10">Bar</tspan> // this is positio
浏览 2提问于2015-12-03得票数 5
回答已采纳
1回答
我想让每个多边形/组以动画的形式出现。我希望它是Y轴上的旋转，旋转的原点是最左边顶点的Y轴(想象一张扑克牌在左边靠在桌子上，从垂直到扁平)。 但是，根据this Fiddle，变换的原点始终是Y轴，但始终使用x=0作为旋转的原点，即使我使用最左边的顶点作为变换原点。 奖励:在初始旋转后，我想等待1秒，然后进行另一次旋转，以最右侧顶点的Y轴为原点使其消失(0到-90度)。 .three {
animation: spin 1s linear;
}
#three {
transform-origin: 87px 153px;
/*transform-origin:
浏览 60提问于2019-02-25得票数 0
回答已采纳
1回答
看上去“坏了”。正确元素的转换来源是不合适的。我试着把这个盒子做成“实心”，但它散开了。
svg:hover #right{
animation: open_right 1s linear infinite;
animation-direction: alternate;
}
svg:hover #left{
transform-origin: 0% 50%;
animation: open_left 1s linear infinite;
animation-direction: alternate;
}
@keyframes open_right{
0%
浏览 6提问于2016-07-02得票数 0
回答已采纳
1回答
如何缩放SVG绘图
、、、
如果我有一张SVG格式的地图，我如何将图像放大X倍？我将如何实现这一点？我希望能够基于X变量对其进行缩放，该变量当然会有所不同
我已经调查过了，但我的时间很紧。我只想知道从哪里开始。
浏览 0提问于2014-12-30得票数 0
我正在使用来自问题添加功能，使bezier的单个锚点连续或不连续.的代码来创建bezier曲线(我添加了一个行渲染器)。
如何将整个bezier曲线(其中可能包含多个三次Bézier段)围绕一个点旋转？
请注意，旋转点可以是任意点，包括曲线、锚点或控制点之一。
浏览 0提问于2018-10-27得票数 3
2回答
图片库工作不正常
、、
我有一个无序的列表中的12个图像在3个冒号x 4行库。悬停时，将应用变换比例。
如何将(3n+1)图像(图像1-4-7-10 )的变换原点设置为左侧，将第3n个(3 -6-9-12)元素的变换原点设置为右侧？
我试着在这里输入html和css，但得到了错误信息。
浏览 1提问于2014-02-06得票数 0
1回答
我现在使用的是下图中的clip-path。我愚蠢地没有查看浏览器支持，发现它在Edge或IE11中不起作用。
我想知道如何或者如果可能的话，我可以用IE11和Edge中支持的SVG来创建下面的效果。
我目前一直在使用下面的代码，但努力理解如何将图像放在上面的图像上。
<svg>
<path d="M0,60 L50,0 L420,0 A56,56 0 20,1 470,60z" fill="red" />
<a xlink:href="#">
<t
浏览 10提问于2017-08-21得票数 1
回答已采纳
据我所知，如果/当SVG对象被缩放或拉伸时，SVG属性vector-effect="non-scaling-stroke"应该防止笔画被扭曲(变得更厚或更薄)。
例如，在这个小提琴()中，我有两个SVG对象，它们都比它们高5倍。因为这两个视图框都需要一个正方形，所以SVG会被拉伸和扭曲。
在上面的SVG -绿色路径是扭曲的-它比它应该是厚得多(stroke-width="2")。
然而，在较低的SVG中，红色路径被显示为“正确”( 2px厚笔画)，因为它具有vector-effect="non-scaling-stroke"属性集。
这似乎适用于
浏览 3提问于2015-04-22得票数 12
回答已采纳
上下文：
根据
如果未指定“0%”或“来自”关键帧，则用户代理将使用动画属性的计算值构造“0%”关键帧。如果没有指定“100%”或“到”关键帧，则用户代理将使用动画属性的计算值构造“100%”关键帧。
这可能导致两种不同的解释：
A)在类中声明属性，而不是在0%或from关键帧中声明。
B)在类中声明属性，在0%或from关键帧中声明。
简化示例：
p:first-of-type {
opacity: 0;
animation: a 3s linear infinite alternate;
}
@keyframes a {
100% {
op
浏览 0提问于2016-11-01得票数 9
回答已采纳
我需要得到一个元素的x/y位置，它在SVG中是这样写的：
<g transform="scale(10,10)" id="g6558">
<text transform="matrix(1,0,0,-1,236.532,417.253)" id="text6560">
<tspan x="0 4.448" y="0" id="tspan6562">10</tspan>
</text>
<
浏览 0提问于2012-01-13得票数 4
回答已采纳
巴西地区应该在模态内加载。
学习snap并尝试从世界地图中获取一个区域，并将其复制到引导模式中。所以点击一个区域，该区域本身的图像就会在模态上使用。
我已经做到了这一点，但形状偏离了新画布的右边。我理解这与viewbox和转换克隆的svg组的同义词有关。如何将形状与视图框相匹配？
下面是我复制图像的代码，当然，这是不起作用的。
var m = Snap('#world-map');
var d = Snap('#svg-region');
var regionSVG = m.select('#Brazil');
var p = Snap.pars
浏览 6提问于2017-08-31得票数 1
回答已采纳
1回答
我已经写了一个函数，它将调整SVG路径或任何形状的大小。但是，当我使用它时，路径确实会调整大小，但不幸的是，它还改变了我的svg-canvas中的位置。
这是我的函数
function output()
{
var transformw=prompt("Enter your new width");
var transformh=prompt("Enter your new height");
var lastw = svg_1.getBoundingClientRect().width;
浏览 0提问于2013-02-18得票数 0
回答已采纳
3回答
我从一个类似于rotate(45,30,50)的SVG文件中解析了一个transform属性，我想把它转换成矩阵形式。我搜索了一下，我所能找到的只是没有坐标的rotate(a)，看起来像这样的[cos(a) sin(a) -sin(a) cos(a) 0 0]
谁能告诉我如何将rotate(angle, x , y)转换为矩阵形式？
浏览 1提问于2012-03-14得票数 3
回答已采纳
我目前正在使用ScrollReveal.js让一堆小的像素化的盒子在滚动时做一些随机的事情，代码如下：
var index=0;
$(document).ready(function(){
jQuery('.pixel-box').each(function() { //each tiny box has class pixel-box
var directions =[ 'left', 'right', 'top', 'bottom']
index += 1
浏览 4提问于2015-08-11得票数 4
我在一个可缩放的图像上画了几个圆圈。我希望这些圆是孔视图，这样这些孔就会突出显示它后面的图像。因此，我使用蒙版绘制矩形以使图像变暗，然后绘制圆形以突出显示图像的某些部分。我将蒙版和矩形组合在一起，并对蒙版进行变换。当图像没有放大时，一切都是完美的。当我放大和平移图像时，圆圈停留在它们应该停留的位置，但背景矩形不会从变换中平移。
<Svg
height={imageDetails.HEIGHT}
width={imageDetails.WIDTH}
pointerEvents='none'>
<G transform={{
浏览 0提问于2020-11-18得票数 0
当我使用固定位置时，它会到达整个页面的最上面--而不是当前的页面视图。因此，如果我滚动到页面的中部并触发弹出，我希望固定的覆盖层粘在浏览器窗口的顶部：
点击查看视频：
请帮帮我！
我试过: 0；位置:固定；-webkit-转换:零！重要；
而且它不起作用。请注意这是shopify和。
//Video
// Initiate FitVid.js
$(".video-container").fitVids();
// Iframe/player variables
var iframe = $('#video')[0];
var player = $f(if
浏览 0提问于2018-11-11得票数 2
回答已采纳
1回答
我定义了这样一个svg <pattern>：
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-1_4" patternUnits="userSpaceOnUse" width="10" height="10">
<image
浏览 0提问于2018-05-04得票数 0
回答已采纳
2回答
我有下面的选项卡面板，我想在其中水平居中显示svg元素。我的css适用于第一个svg元素(柱状图)，但不适用于第三个元素(圆环图)。这两个都位于标签内容父元素中的div中，但只有一个获得了css修饰符。如何使圆环图在其父svg中居中？Here是我正在编写的代码。 CSS： .tab-content {
display: flex;
justify-content: center;
} HTML： <div class="tab-content">
<div role="tabpanel" class="tab-pane
浏览 44提问于2020-07-15得票数 0
2回答
我将<svg>元素直接嵌入到HTML5文档中，并希望根据页面的字体大小缩放重复的背景模式。没问题，SVG支持CSS单位，所以我可以用ems来指定大小，对吗？
SVG规范“SVG中的所有和都可以使用或不使用单元标识符来指定。”事实上，这两个都做了我所希望的：
<rect x='1em' y='2em' width='3em' height='4em' />
<circle cx='6em' cy='7em' r='8em' />
但是多边形(例如)有
浏览 0提问于2011-12-15得票数 10
回答已采纳
我尝试使用D3.js的d3.behavior.drag() drag事件来更新我的数据模型(不立即设置元素位置)，然后运行我的"draw“函数来更新基于更新后的模型的所有元素。此外，我在包含的group元素上使用了translate transform，以便移动与拖动的对象相关的所有元素(我从下面链接的示例中删除了多余的元素)。这会导致拖拽的元素在拖拽时卡顿，拖拽速度越快，情况会变得越糟。
参见。
以下是示例的代码：
blocks = [
{ x: 0, y: 0 }
];
drag = d3.behavior.drag()
.origin(Object)
.on(
浏览 1提问于2012-10-26得票数 20
回答已采纳
我有svg-png几乎完美地工作在客户端，只是在javascript/d3中它都能工作，但它丢失了大量的细节。有人能解释为什么会这样吗？：原始图像是：
var svg = document.querySelector( "svg" );
var svgData = new XMLSerializer().serializeToString( svg );
var canvas = document.createElement("canvas");
canvas.width = d3.select("svg").attr("wi
浏览 6提问于2015-10-30得票数 1
我的应用程序生成一组要在SVG中绘制的图形点。水平和垂直方向的点值始终在0-1000的范围内。进行绘制的矩形的大小可能会更改。
下面是在200 x 85矩形上绘制图形的SVG元素：
<svg width="200" height="85" viewBox="0 0 1000 1000" preserveAspectRatio="none">
<polyline stroke="#e69800"
stroke-width="2px"
浏览 0提问于2012-10-24得票数 4
回答已采纳
我想通过库在Android中呈现我的svg (但我愿意使用另一种解决方案)。当接收到Touchevent时，我想要计算触摸事件与给定的svg元素之间的距离。特别是一个<svg:g id:"myElement">元素。这个元素反过来得到了一群<svg:path ...>孩子。
目前我不知道该怎么做这件事。即使在默认情况下没有支持此函数的库时，如果有人能向我指出一个我可以实现的算法，我也会很感激。
浏览 0提问于2014-09-09得票数 0
3回答
我有一个带有SVG文本元素的地图来命名这些位置。我希望位置(形状)是可单击的，但因为文本元素在它们的顶部，所以如果有人将鼠标悬停在文本元素上并单击，则不会发生任何事情，因为形状没有被单击:文本元素是。我如何才能使它在文本元素被点击时，点击“通过”它并到达形状？
浏览 1提问于2012-10-16得票数 29
回答已采纳
我使用的API可以根据我的地图自动生成图例，但是图例的格式不正确。我发现创建的SVG返回一个转换：
变换: matrix(1.00000000,0.00000000,0.00000000,1.00000000,62.50000000,62.50000000)
但是我想要的是它返回一个
变换: matrix(1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000)
我设法让它在Firefox中工作，使用它作为我的CSS
.esriLegendLayer svg :nth-child(2){
display: inli
浏览 0提问于2015-07-14得票数 2
我想以编程的方式在适当的地方镜像任意的SVG元素。这意味着它们应该保持在当前位置，但会得到镜像。
我知道我可以通过使用scale(1, -1)来镜像元素，然后翻译它们。但问题是:我如何知道要翻译的数量？
我想我可以通过将元素的高度和元素到0轴的距离的两倍相加来计算数量。
例如，这适用于以下内容：
<polyline id="line1" stroke="green" stroke-width="1" fill="none"
points="
10, 10
浏览 0提问于2014-09-09得票数 0
有时，我发现根据bottom、top、left和right属性给出元素的大小比较方便，而不是使用width和height。例如，这里所接受的答案是：
但是，由于某些原因，这不适用于svg元素。我在最新的稳定版Firefox和Chrome中尝试了下面的示例。svg元素莫名其妙地想要大小为300x150：
为什么？
浏览 8提问于2014-10-03得票数 6
回答已采纳
2回答
我希望在circle svg元素上创建一个简单的脉冲动画。我使用的是transform: scale(..,..)动画，但出于某种原因，它正在其容器中移动整个圆圈，而不是简单地缩放元素本身。
下面是动画：
animation: pulsate 2s infinite linear;
@keyframes pulsate {
0% {transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {transform: scale(1.2, 1.2); opacity: 0.0;}
}
下面是一个示
浏览 3提问于2015-12-17得票数 5
回答已采纳
是否有一种“容易”的DOM方法来获得组的转换位置(中心或原点)和边框(宽度、高度)？
作为逻辑容器标记的<g>除了其子容器使用的transform之外，不具有几何属性。
let o = document.getElementById("o");
let g = document.getElementById("g");
o.textContent += "rect x = " + r.x.baseVal.value + "\n";
o.textContent += "group x = " +
浏览 0提问于2019-12-19得票数 0
2回答
我试图理解D3中的转换是如何工作的，但我想我没有理解。
缩放会改变SVG对象的大小吗？意思是如果我给一个很大的数字，物体的大小会看起来更大？平移是否将对象从一个位置移动到不同的位置？我试过了，但它并不像我想的那样工作。
你能给我解释一下它是怎么工作的吗？
浏览 0提问于2012-06-05得票数 41
回答已采纳
3回答
我有一个网页，其中有SVG之上的IMG元素，应该绘制形状在它上面。
绘图在浏览器之间正确执行。但是，当涉及到接收事件时，IMG实际上似乎会阻塞事件/接收事件(它本身没有任何事件附加，因此不会显式地停止)。
示例：
(固定标记，添加圆圈) FF，Chrome："svg收到鼠标向下“(正确)
Opera，IE9：-没有-(不正确)
当图像通过CSS可见性或显示: none隐藏时，它开始工作，但这种方式当然不能使用。
如何将SVG元素置于IMG元素之上，以便它能够接收事件？(在Opera，IE9中)
谢谢
浏览 1提问于2012-04-10得票数 6
回答已采纳
2回答
转换svg插图中的css属性
、、、、
我第一次尝试用css对用svg制作的插图进行动画处理，但我有一个不知道如何解决的问题。
当我尝试将css转换属性应用于路径时，特别是对下臂(Shape-33)，该路径消失了。我不太理解的是，如果我将这个转换属性应用于父svg标记，它确实适用，而且肯定会遗漏一些东西。
有人知道我做错了什么吗？
谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compati
浏览 0提问于2021-06-13得票数 0
我正在尝试绘制一个。Vega-Lite支持自定义SVG路径字符串(例如"M10 10 H 90 V 90 H 10 L 10 10")作为形状，但它建议路径绘制命令在x和y轴()的-1到1的边界框内居中。
我有一些我想使用的图标，但它们不适合边界框。我尝试使用Inkscape调整它们的大小，但它只是向现有路径添加了一个转换属性。当然，这适用于在浏览器(或其他地方)中查看SVG，但由于路径本身保持不变，Vega-Lite图表显示的SVG太大且偏离中心。
有没有办法重新计算SVG路径？
对于上面的例子，我想要的解决方案是"M-1 -1 H 1 V 1 H -1 L -1 -
浏览 1提问于2019-03-19得票数 0
我试图移动一个位于HTML图像中心的SVG圆圈。如果你在图片上按下鼠标并拖动圆圈，它的工作效果很好。
但是，如果我放大图像(点击代码页中的+按钮)，pageX和pageY到SVG的协调翻译就会混乱。
我该如何正确处理这件事？(我的完整代码同时处理SVG的触摸和鼠标事件--我已经将它简化为这个示例中的鼠标)
我的代码：
下面是我如何获得协调的方法(请参见codepen中一个可运行的示例)：
// map to SVG view so I can move the circle
function recompute(ax,ay)
{
// alert ("Here"
浏览 1提问于2017-01-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
