javascript - 在具有多个图案的图案中旋转单个图案
问题描述
我在 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>
这就是最后一个的实际外观,但是 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 - 将 PHP 日期格式转换为 Javascript 日期格式的函数(不是日期本身!)
- maps - 如何在 Elixir 中连接两张地图
- javascript - 有没有办法下载捕获的同时显示视觉和音频内容的 webM/mp4 视频?
- excel - 我得到一个#Name?运行宏时出错
- html - 部分出现在 html 中的正常流程之外
- mercurial - 分支上的新远程头?水银推送错误
- c# - Csv 文件被读入我的 ReadCsvFile 方法,但没有被传递到我解析它的位置(TinyCsvParser)
- java - 在 java 中使用元数据转换 JPEG 文件名
- php - 如何修复 Laravel/Lumen 应用程序中的“cURL 错误 6:无法解析主机”
- reactjs - Google API 与来自 `react-router` v3 的 `Link` 一起使用时似乎会导致某种错误