代码之家 › 专栏 › 技术社区 › ashish singh

为什么转换会移动整个cordinate系统,而不是移动SVG中的元素?

transform graphics svg css javascript

ashish singh · 技术社区 · 7 年前

我认为在canvas和CSS中,它的行为是相同的,所以标记javascript和CSS也是一样的。

1 回复 | 直到 6 年前

ccprog 7 年前

我不确定我是否理解你的问题,但让我试试:

转换后的元素可能不是grafics元素,而是容器,例如 <g> 要素在这种情况下,所有子图元都将继承变换后的坐标系。
元素可能具有关联的绘制服务器(例如,图案或渐变),或者具有自己的大小和定位机制的过滤器、遮罩或剪裁路径。这些机构在变换后的坐标系中工作。

这里有一个例子来说明。第一个矩形具有线性渐变,其渐变向量在用户空间中定义。第二个矩形相同,但旋转并平移到一侧。然后将渐变与矩形一起移动。

<svg width="200" height="150">
  <defs>
    <linearGradient id="gradient" gradientUnits="userSpaceOnUse"
        x1="0" y1="50" x2="100" y1="50">
      <stop stop-color="red" offset="0"/>
      <stop stop-color="blue" offset="1"/>
    </linearGradient>
  </defs>
  <rect x="0" y="20" width="100" height="30" fill="url(#gradient)" />
  <rect x="0" y="20" width="100" height="30" fill="url(#gradient)" transform="translate(200, 20) rotate(90)" />
</svg>

transform 属性仅采用用户空间坐标,即无单位数字、定位和大小属性(如x、y、宽度和高度等)可能具有单位标识符(如百分比、, em 或其他CSS单元标识符。这使我们能够进行更灵活的定位。

例如,下面的矩形将始终出现在SVG中间的相同大小,而不管它是否被调整大小:

<svg width="100%" height="100%">
  <rect x="50%" y="50%" width="60" height="60" transform="translate(-30, -30)" />
</svg>

推荐文章

WebDragon · 是否可以通过在html<SVG>标签中设置特定的data-*属性来更改SVG图像中显示的文本内容?

1 年前

Paul Lovell · 为什么JavaScript中生成的SVG元素的大小与HTML中直接定义的SVG元素不同?

1 年前

man · CSS-如何具有或模拟仅适用于内部的半径边框

1 年前

McLaren · 增加笔划宽度属性后,图标将被裁剪

1 年前

docker compose · React Native中椭圆或圆角矩形视图周围的进度边界

1 年前

Lucas Martins Soares · 如何覆盖SVG图像的默认颜色?[副本]

1 年前

user2171796 · 两个M。。。Z序列相遇,背景颜色显现

1 年前

MarcelausZell · 调整svg的大小会导致额外的高度

1 年前

RaiuProGram · Svg evenoodd=“true”不起作用(用路径在Svg上打孔)

1 年前

compx · 当尝试使用Selenium选择svg时,NoSuchElements存在

1 年前