个人中心
gpt4 book ai didi

javascript - 在具有多个图案的图案中旋转单个图案

转载 作者：太空宇宙 更新时间：2023-11-04 00:47:39 25 4
gpt4 key购买 nike

我在 SVG 中创建了一些图案:

  • 有竖条纹的(id:A)
  • 有横条纹的(id:B)
  • 一个有水平和垂直条纹的(我通过将两种模式添加到一个新模式中来做到这一点，id:AB)
  • 还有一个图案，有水平和垂直条纹，但它们都以不同的方式旋转(A 旋转 25°，B 旋转 45°)

我的 SVG 看起来像这样:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <svg width="1000px" height="1000px">
        <defs>
          <pattern id="A" patternUnits="userSpaceOnUse" width="25" height="25">
              <path d="M0,12.5 L25,12.5" style="stroke: black; stroke-width: 0.45"/>
          </pattern>

          <pattern id="B" patternUnits="userSpaceOnUse" width="25" height="25">
            <path d="M12.5,0 L12.5,25" style="stroke: black; stroke-width: 0.45;"/>
          </pattern>
          
           <pattern id="AB" patternUnits="userSpaceOnUse" width="25" height="25">
            <rect x="0" y="0" height="100%" width="100%" fill="url(#A)"/>
            <rect x="0" y="0" height="100%" width="100%" fill="url(#B)"/>
          </pattern>
          
          <pattern id="A@25deg;B@45deg" patternUnits="userSpaceOnUse" width="100%" height="100%">
            <rect x="0" y="0" height="100%" width="100%" fill="url(#A)" style="transform: rotate(25deg)"/>
            <rect x="0" y="0" height="100%" width="100%" fill="url(#B)" style="transform: rotate(45deg)"/>
          </pattern>
        </defs>
        <rect x="0" y="0" width="100px" height="100px" fill="url(#A)"/>
        <rect x="125" y="0" width="100px" height="100px" fill="url(#B)"/>
        <rect x="0" y="125" width="100px" height="100px" fill="url(#AB)"/>
        <rect x="125" y="125" width="200px" height="200px" fill="url(#A@25deg;B@45deg)"/>
      </svg>
</body>

</html>

pattern

这是最后一个实际应该看起来的样子，但是 transform: rotation() 把它弄乱了。问题是我不能在每个子模式上使用 patternRotation，因为这样我每次都必须创建一个新模式。由于性能问题，我不想要这个。而且我不能在父模式上使用 patternRotation，因为那样它会旋转整个东西，而不仅仅是一行。

有解决办法吗？

最佳答案

您可以避免在基本图案中旋转:

<svg width="1000px" height="1000px">
	<defs>
  	<pattern id="A" patternUnits="userSpaceOnUse" width="30" height="12.5">
    	<path d="M0,0 L30,12.5" style="stroke: black; stroke-width: 0.45"/>
   	</pattern>
    <pattern id="B" patternUnits="userSpaceOnUse" width="20" height="20">
    	<path d="M0,20 L20,0" style="stroke: black; stroke-width: 0.45;"/>
    </pattern>
    <pattern id="MIX" patternUnits="userSpaceOnUse" width="100%" height="100%">
    	<rect x="0" y="0" height="100%" width="100%" fill="url(#A)" />
      <rect x="0" y="0" height="100%" width="100%" fill="url(#B)" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="100px" height="100px" fill="url(#A)"/>
  <rect x="125" y="0" width="100px" height="100px" fill="url(#B)"/>
  <rect x="125" y="125" width="200px" height="200px" fill="url(#MIX)"/>
</svg>

关于javascript - 在具有多个图案的图案中旋转单个图案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56707001/

25 4 0
文章推荐： c - boolean 函数错误
文章推荐： javascript - 在 sails js 中处理事件
文章推荐： cat 函数无限次调用 read()
文章推荐： html - 如何在缩小屏幕尺寸时均匀地修剪图像的左右两侧？ (@媒体查询)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com