主页 / coding / 问题

问题[svg](coding)

Martin Hope
Pain In Kabir
Asked: 2025-04-03 05:59:04 +0800 CST
  • 5

我对 SVG 文件没有经验。所以，我真的不知道该怎么办。

我的 SVG 文件中有一张欧洲地图： 我的 SVG 图像

然后将国家添加到 SVG 代码中，如下所示：

<svg viewBox="567.8 340.8 122.8 87.6">
 <path d="M666.8 348l0.6-0.6 2.3 0.7 4.5 2.2 1.1 0.9 0.8 3 2.1 5.1 2.9 4.9 1.7 3.6 0.9 3.9-0.6 1.6-4 1.7-0.8 0.5-2 2.7 0 1.2 3.3 1.3 1.8 1 0.8 1-0.2 2.4 0.4 1.1-0.8 1.5 0.1 1.3 1 1.6 1.2 1.8 0 1.3 2.7 2.8 1.9 2.8 1.4 1-1.2 1.3 1.8 2.6 0.1 1.3-1.2 1.8-3 0.5-4.8 4.6-2.4 2.7-3.4 4.4-0.6 1 1.5 3.8-0.1 1.8 1.9 1.4-0.4 0.9-3.3-0.7-0.9-0.2-5.7-1.9-0.8-1.4-1-0.7-3.1-1-3.6-0.3-3.2 0.2-1.4 1.5-1.8-0.1-2.4-1-3 0.1-2.3 1-1.1 2.1-1.7-0.6-1.4 0.4-0.6-2.7-1.4-0.4-3-3-2.2 1.3-1 1.7-2.2 0-0.5-1.5-1.3-0.2-0.5-1.6-2.8-2.2-0.5-1.8-2.7-0.8-0.5 0.2-3.5-1.8-1.8 1-1-0.6-2.7-2.3 1.4-0.5 0-1.6-3.6 0.7-3.3-1.9-2.2-0.6-1.3 0 1.7 2.4-3.5 2.5-1-0.4-1.5-1.9-2-1.8-1.6-0.9 1.6-1.2 0.7-1.1-1.8-1.2-3.2 0.7-0.8-0.9-2.7-1.1-4.6-1.1-1-1.1-0.3-1.1-3.3-0.8 0.1 1.9-2.1 0.4 1.6-3.6 0.4-2.3-1.6-3.2-2.2-0.9 0-1.6-1.9-3.1 0.8-1.1 0.7-2.6-0.8-1.9-2-2.3 0.6-2.6-1.4-1.7-3.3-2.1-1.6-1.4 0.7-1.6 1.9-1.8 0.3-2.7-1.8-4.1-0.7-2.6 2.8 0.9 0.7-0.5-0.1-1.8-4.1-0.7-0.1-1.2 2 0.4 3.8-1.4 6.5-1.8 6.9-1.7 3.3-0.5 2-2.2 1.9-1.7 3.8-0.7 1.3-0.8 2.8-1.2 6.6-1.2 5.5-0.4 5.4 2.3-0.9 0.3-3-1.2 2.2 3.5 1.1 1.2 2 0.9 1.7 0.3 4.9-0.5 2.2-1.1 0.5 0.1 6.6 0.4 22.9 0.9 7 0.1z" id="PL" name="Poland"> </path>
</svg>

是的，这是波兰多边形的线。我有 40 个这样的国家，我也想添加俄罗斯。但是，我不知道如何确定多边形角的坐标。我该怎么做？

我还有一个世界地图 SVG，但我认为我无法将其正确添加到欧洲地图中。但是，这些是该世界地图上的俄罗斯坐标：

<svg viewBox="1104 26 675.9 211.9 ">
  <path class="Russian Federation" d="M 1661.7 231 1660.3 229.9 1658.4 226.6 1660.9 226.5 1657 219 1652.3 213.6 1655.2 211.4 1662.1 212.5 1661.5 206.3 1658.7 199.5 1659 197.2 1657.7 191.5 1650.8 193.4 1648.2 195.8 1640.6 195.8 1634.6 190 1625.6 185.5 1615.6 183.5 1609.4 177.5 1604.9 173.7 1601.1 171 1593.4 164.8 1587.4 162.6 1578.8 160.7 1572.6 160.9 1567.5 162 1565.8 165.1 1569.5 166.5 1572 169.9 1570.7 171.9 1570.9 178.4 1572.8 181.2 1568.4 185.1 1561 182.7 1555.4 183.3 1551.5 181.2 1548.1 180.5 1543.7 184.9 1537.8 185.9 1534.2 187.5 1527.4 186.5 1522.8 186.5 1517.9 183.3 1511.3 180.4 1505.9 179.5 1500.2 180.3 1496.2 181.5 1487.7 178.9 1484.1 174.3 1477.4 172.7 1472.6 171.9 1465.6 169.4 1464.3 175.8 1468.3 179.4 1465.9 183.8 1457.9 182.2 1452.9 182 1448.1 179.1 1442.9 179 1437.6 177.1 1431.7 180 1425 185.3 1420.3 186.4 1418.6 186.9 1414.2 183.1 1408.2 184 1404.9 181.3 1400.9 180.1 1396.8 176.5 1393.5 175.4 1387.3 177 1378.9 173.5 1377.8 176.7 1359.5 161.1 1351.1 156.4 1351.9 154.4 1342.7 160.2 1338.3 160.5 1337.2 157.2 1330.1 155.1 1325.8 156.6 1321.4 150.3 1312.3 149 1309.2 151.5 1298.3 153.8 1296.6 155.3 1279.6 157.4 1278.2 159.5 1283.3 163.7 1279.3 165.3 1280.8 166.9 1277.3 169.9 1286.7 174.2 1286.5 177.1 1279.5 176.8 1278.7 178.7 1271.4 175.5 1263.7 175.6 1259.3 178.2 1252.7 175.7 1240.7 171.4 1233.1 171.6 1225 178.3 1225.6 182.8 1219.6 179.2 1217.4 186.1 1219.2 187.3 1217.5 192.1 1222.8 196.3 1226.4 196.1 1230.7 200.3 1230.9 203.5 1233.7 204.6 1232.3 208.3 1227.7 209.3 1224.1 215.8 1230.1 221.9 1230.5 226.1 1237.8 233.6 1235.3 236.2 1234.7 237.8 1232.3 237.3 1228 233.5 1226.5 233.3 1222.9 231.8 1220.8 229.2 1215.7 227.9 1212.8 228.9 1211.6 227.7 1204 224.6 1196.3 223.6 1191.7 222.5 1191.3 223.3 1183.7 217.9 1177.5 215.5 1172.4 211.8 1176 210.8 1179.2 205.6 1175.9 203.1 1182.8 200.5 1182.4 199.1 1178.1 200.1 1177.7 197.4 1179.9 195.6 1184.7 195.2 1185 193.1 1183.2 189.6 1184.5 186.4 1184.1 184.5 1176.4 182.5 1173.5 182.6 1169.9 179.7 1166.3 180.7 1159.6 178.5 1159.5 177.3 1157.2 174.6 1153.3 174.3 1152.5 172.4 1153.4 171.1 1149.6 167.6 1144.7 168.2 1143.2 167.9 1142.2 169.3 1140.4 169.1 1138.4 165.1 1136.9 163.1 1137.7 162.5 1141.6 162.7 1143.2 161.4 1141.5 159.8 1138.1 158.7 1138.1 157.6 1136 156.5 1132.2 152.5 1132.9 150.9 1131.8 148 1127 146.6 1124.6 147.3 1123.7 145.8 1118.4 144.3 1116.3 140.7 1115.3 137.8 1112.8 136.5 1114.4 134.6 1112 129 1114.6 125.6 1113.7 124.6 1118.2 121.3 1112.8 118.5 1120.8 111.1 1124.2 107.7 1125.1 104.8 1117.7 100.9 1118.6 97.1 1113.7 92.9 1115.4 88.1 1108.9 81.8 1111.8 77.6 1104.5 73.9 1104.1 70.1 1107.3 69.6 1113.7 67.5 1117.4 65.6 1125.1 68.8 1136.8 70.1 1154.5 76.3 1158.6 78.9 1160.1 82.6 1156.4 85.5 1149.9 87 1129.7 82.8 1126.8 83.5 1134.9 87.6 1135.9 90.2 1137.8 96 1143.9 97.7 1147.7 99.2 1147.5 96.4 1144.1 94 1146.2 91.8 1157.8 95.4 1161 94 1156.7 89.8 1164.8 84.4 1168.9 84.7 1173.5 86.6 1174.6 82.8 1169.9 79.5 1170.7 76.2 1166.4 72.8 1178.7 74.6 1182.3 77.6 1177.2 78.3 1178.4 81.4 1182.5 83.3 1188.5 82.1 1188.1 78.6 1195.8 75.9 1208.2 71.3 1211.4 71.5 1208.9 74.8 1214.3 75.4 1216.4 73.5 1224.1 73.4 1229.1 71.1 1235.5 74.4 1238.3 70.8 1232.3 67.7 1233.5 65.9 1246.5 67.5 1253.1 69.2 1271.7 75.4 1272.8 72.6 1266.9 69.7 1266.1 68.6 1260.8 68 1260.6 65.5 1255.9 61.3 1254.8 59.6 1259.1 54.9 1258.5 50.1 1260.7 49.1 1272.1 50.5 1275 53.4 1274.1 57.6 1277.8 59.3 1281.6 63 1285.4 70.4 1292.1 73.7 1292.6 77.4 1289.1 85.2 1294.4 86 1294.9 84 1298.7 82.6 1298.2 79.9 1300.1 77.2 1295.7 74.1 1295.3 70.5 1290.5 70.1 1287.6 67.1 1287.2 61.7 1279 57.4 1283.7 53.9 1280 50.2 1281.9 50.1 1286.1 52.9 1288.2 58 1293.2 59 1288.6 55.2 1293.7 53.1 1301.8 52.8 1311.4 55.8 1304.5 51.5 1299.6 46 1305.5 45 1315 45.2 1322.8 44.5 1317.2 41.9 1318.5 38.6 1322.7 38.4 1327.6 36 1336.9 35.3 1336.7 33.9 1346 33.5 1350.3 34.6 1355.7 32 1362.7 32.1 1361.2 29.9 1362.1 27.9 1368.3 25.9 1376.6 27.5 1373.1 28.7 1382.5 29.4 1386.6 31.8 1388.5 30.6 1399.4 30.7 1411 33.1 1416.5 34.9 1419 37.5 1416.6 39 1410 41.8 1408.9 43.3 1414.5 44 1421.7 45.3 1424.1 44.3 1429.9 47.6 1430.1 46.3 1435.3 45.5 1448.9 46.3 1452.7 48.7 1470.1 49.5 1465.3 45.6 1474.8 46.5 1480.9 46.4 1490.8 49.1 1496.8 52.4 1497.2 54.6 1507.3 58.8 1516.3 60.9 1513.3 55.4 1522.7 57.7 1527.7 56.3 1537.5 57.9 1538.5 56.5 1546.1 57.2 1536.7 52.3 1538.8 50.1 1579.2 53.5 1587.1 56.6 1603.4 60.6 1618.2 59.6 1627.5 60.5 1634.1 62.7 1639.2 66.6 1646.5 68.1 1650.4 67 1657.4 66.9 1666.7 67.9 1673.6 67.3 1687.9 72.1 1690.4 70.4 1681.9 67 1680.1 64.6 1695.4 66.1 1703.4 65.8 1719.2 68.3 1728.7 70.7 1761.9 92.8 1759.9 95.3 1753.7 94.9 1761.9 97.9 1771 102.6 1775.2 104.1 1779 106.5 1780 108 1770 106.8 1763.4 111.1 1760.4 111.8 1758.8 115.9 1756.8 119.5 1758.5 122.2 1747 118.1 1740.9 122.7 1736.2 120.5 1734.8 123.1 1727.8 122.2 1730.9 126.1 1732 131.9 1734.9 134.3 1741.7 135.6 1750.8 144.3 1746.7 144.6 1750.1 149.6 1754.8 152.2 1749.8 155.3 1755.2 162.3 1749.5 163.8 1754 170 1752.3 175.8 1746.6 171.5 1736.1 162.6 1719.9 149 1713.4 140.7 1713.5 137.1 1710.7 134.3 1716.4 133 1716.2 125.5 1716.9 119.5 1719.4 114.8 1712.8 106.6 1708.1 107.1 1711.3 111.9 1707.7 118.3 1695.4 111.1 1686.3 113.1 1686.3 122.9 1694 126.5 1685.5 128.1 1679.1 128.7 1674.8 124.4 1666.8 123.5 1664.3 126.4 1649.2 125.4 1636 127.1 1632.5 138.8 1627.5 153 1635.7 153.8 1641.4 157.6 1647.2 158.9 1647.6 155.9 1653.2 156.3 1666 163 1670.7 168.2 1672.1 174.4 1677.6 181.8 1682.9 191.7 1681.9 200.8 1683.2 205.1 1681.2 212.5 1679.1 219.8 1678.2 223.5 1673.6 227.2 1670.5 227.3 1665.3 224.2 1661.2 228.9 1661.7 231 Z"></path>
</svg>

svg
Martin Hope
Dem Pilafian
Asked: 2025-03-29 14:26:24 +0800 CST
  • 5

对于 SVG<rect>容器，fill用<pattern>标签制作的背景似乎是相对于整体视图开始的。

<pattern>相对于容器来说，最干净的开始方法是什么<rect>？

目标是能够让多个<rect>容器重复使用，<pattern>这样每个容器都从容器的左上角开始渲染相同的背景。下面是一个示例 SVG，其中有两个<rect>容器装满了弹珠。

SVG：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
   width="400px" height="250px" viewBox="0 0 400 250">
   <defs>
      <pattern id="marbles" width="50" height="50"
         patternUnits="userSpaceOnUse">
         <circle cx="25" cy="25" r="22" fill="plum" stroke="black"/>
      </pattern>
   </defs>
   <rect width="100%" height="100%" fill="teal"/>
   <rect x="10" y="10"  width="150" height="100" fill="url(#marbles)"/>
   <rect x="90" y="120" width="250" height="100" fill="url(#marbles)"/>
</svg>

实际产量：
实际产量

后台fill忽略容器的x和属性。yrect

期望输出：
期望输出

使用代码进行实验：
https://jsfiddle.net/pilafmon/b5edq3go/

svg
Martin Hope
Franck Freiburger
Asked: 2025-01-22 00:35:56 +0800 CST
  • 6

我有一个包含多个形状的 SVG 组，这些形状使用 定义的渐变<g fill="url(#myGradient)"...。我想对组应用变换（例如缩放、旋转、平移），但我需要渐变相对于屏幕（视口）保持固定。

目前，当我对组应用变换时，渐变也会受到影响，即使我使用了 gradientUnits="userSpaceOnUse"。如何确保渐变保持固定位置，不会随着变换后的组移动或旋转？

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="200" y2="0">
      <stop offset="0%" stop-color="red"></stop>
      <stop offset="100%" stop-color="blue"></stop>
    </linearGradient>
  </defs>
  <g fill="url(#myGradient)" transform="translate(200, 200) rotate(0)">
    <rect x="0" y="0" width="300" height="80"></rect>
    <rect x="0" y="100" width="300" height="80"></rect>
  </g>
</svg>

带有rotate(0)-> 渐变的蓝色在右侧
带有rotate(90)-> 渐变的蓝色在底部

我应该做哪些调整来确保渐变相对于屏幕保持固定并且不会随着组而变换？

svg
Martin Hope
PirateApp
Asked: 2025-01-18 16:06:19 +0800 CST
  • 5
  • 我正在使用 svelte 5 / sveltekit 2
  • 我有一个简单的示例，其中我从如下所示的 API 获取数据
    const itemsFromAPI = [
        { id: 1, symbols: ['btc', 'eth'] },
        { id: 2, symbols: ['xrp', 'xmr'] }
    ];

<script>
    const itemsFromAPI = [
        { id: 1, symbols: ['btc', 'eth'] },
        { id: 2, symbols: ['xrp', 'xmr'] }
    ];

    const handleIconChange = async (iconName) => {
        return await import(`/node_modules/cryptocurrency-icons/svg/color/${iconName}.svg?inline`);
    };
</script>

<h1>How to make dynamic crypto icons work here</h1>

{#each itemsFromAPI as item (item.id)}
    <div>
        <span>{item.id}</span>
        {#each item.symbols as symbol (symbol)}
            <span>{symbol}</span>
            <span>{@html handleIconChange(symbol)}</span>
        {/each}
    </div>
{/each}
  • 这是CODESANDBOX 的链接，你可以亲眼看到这个问题
  • 有什么想法可以让动态导入的 SVG 图标在 sveltekit 中工作吗？
svg
Martin Hope
McLaren
Asked: 2024-12-23 20:14:09 +0800 CST
  • 5

我在 Figma 中制作了一个小而简单的图标，将其上传为 svg，我需要增加 stroke-width 属性。然而，这导致图标被裁剪。我尝试过调整 viewBox、width 和 height 属性 - 我无法获得正确的比例。也许是别的原因？这是 svg-icon 的代码：

<svg width="152" height="132" viewBox="0 0 152 132" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M150 130C150 120.05 148.086 110.198 144.367 101.005C140.648 91.8125 135.197 83.46 128.326 76.4243C121.454 69.3887 114.978 63.8077 106 60C96.5 70.5 87 74 77 74C67.9861 74 58.5 71.5 47.6814 60C38.7033 63.8077 30.5456 69.3887 23.6741 76.4243C16.8026 83.46 11.3518 91.8125 7.63291 101.005C3.91407 110.198 2 120.05 2 130H76L150 130Z" stroke="#0053A4" stroke-width="16"/>
<circle cx="77" cy="38" r="36" stroke="#0053A4" stroke-width="16"/>
</svg>
svg
Martin Hope
Don Hatch
Asked: 2024-12-21 23:58:17 +0800 CST
  • 6

各种 stackoverflow 答案和评论展示了在 svg 过滤器中使用以下构造的示例：

<feImage href="#id_of_some_element_in_current_svg">

（或使用旧语法xlink:href=代替href=），总是存在这样的警告“这在 Firefox 中不起作用，因为这个；如果您想要在 Firefox 中起作用的东西，请使用内联数据 URI 作为 feImage 的输入，而不是对象引用”。

例如：

好的，我正在尝试。只要我不尝试对结果进行几何变换，它似乎就有效。

在我的应用程序中，我还需要将任意变换矩阵（通常带有非均匀缩放和剪切）应用于 svg 滤镜的结果。但我根本无法在 Firefox 中实现此功能 - 在 Firefox 中，它似乎总是应用一些我没有要求的均匀缩放。

例子

这是一个展示该问题的简单例子。

feImage（成功由内联数据 URI 生成）是一个 100x100 的灰色正方形，里面有蓝色、红色、绿色的小正方形：

如上所述的 feImage

我试图用各种均匀和非均匀比例绘制它的 9 个副本。

我在scale(...)这里使用 来表达每一种变换，但我也尝试使用 来表达同样的事情matrix(...)，但那也不起作用。

<!DOCTYPE html><html><head><meta charset="utf-8" ></head><body>

<svg width="480" height="480">

  <defs>
    <filter id="the_filter">
      <feImage href='data:image/svg+xml,
        <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
          <!-- a gray square with little blue,red,green squares inside -->
          <rect x="0" y="0" width="100" height="100" fill="gray" />
          <rect x="10" y="10" width="10" height="10" fill="blue" />
          <rect x="80" y="10" width="10" height="10" fill="red" />
          <rect x="10" y="80" width="10" height="10" fill="green" />
        </svg>'
      />
    </filter>
  </defs>

  <!-- a blue frame around the entire svg -->
  <rect x="0" y="0" width="100%" height="100%" stroke-width="10" stroke="blue" fill="none" />

  <!-- 9 rects with the filter applied, with various uniform and nonuniform scales -->

  <rect x="0" y="0" width="100" height="100" transform="translate(20 20) scale(.5 .5)" filter="url(#the_filter)" />
  <rect x="0" y="0" width="100" height="100" transform="translate(100 20) scale(1 .5)" filter="url(#the_filter)" />
  <rect x="0" y="0" width="100" height="100" transform="translate(245 20) scale(2 .5)" filter="url(#the_filter)" />

  <rect x="0" y="0" width="100" height="100" transform="translate(20 100) scale(.5 1)" filter="url(#the_filter)" />
  <rect x="0" y="0" width="100" height="100" transform="translate(100 100) scale(1 1)" filter="url(#the_filter)" />
  <rect x="0" y="0" width="100" height="100" transform="translate(245 100) scale(2 1)" filter="url(#the_filter)" />

  <rect x="0" y="0" width="100" height="100" transform="translate(20 245) scale(.5 2)" filter="url(#the_filter)" />
  <rect x="0" y="0" width="100" height="100" transform="translate(100 245) scale(1 2)" filter="url(#the_filter)" />
  <rect x="0" y="0" width="100" height="100" transform="translate(245 245) scale(2 2)" filter="url(#the_filter)" />

</svg>

</body></html>

结果是 chrome 131.0.6778.139、chromium 131.0.6778.85、opera 115.0.5322.109（正确）：

在 Chrome 上看起来正确：各种统一比例应用正确

Firefox 133.0.3 中的结果（错误）：

在 Firefox 上看起来是错误的：所有非均匀尺度都变为均匀尺度

我如何以在 Firefox 和其他浏览器中有效的方式非均匀缩放这些 feImage？

svg
Martin Hope
Eric G
Asked: 2024-12-18 04:33:46 +0800 CST
  • 5

我想要做的是在画布上的蓝色圆圈上绘制 SVG。蓝色圆圈应该是背景。

然而结果只是 SVG。

在此处输入图片描述

最终结果应该是这样的

（注意：假装我使用的是一个圆形 SVG，而不是代码中使用的那个）

在此处输入图片描述

其中背景较大并且 SVG 插入其中并居中。

我怎样才能做到这一点？

const svg = `<svg xmlns="http://www.w3.org/2000/svg" fill="#ff0000" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 0c17.7 0 32 14.3 32 32l0 10.4c93.7 13.9 167.7 88 181.6 181.6l10.4 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-10.4 0c-13.9 93.7-88 167.7-181.6 181.6l0 10.4c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-10.4C130.3 455.7 56.3 381.7 42.4 288L32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l10.4 0C56.3 130.3 130.3 56.3 224 42.4L224 32c0-17.7 14.3-32 32-32zM107.4 288c12.5 58.3 58.4 104.1 116.6 116.6l0-20.6c0-17.7 14.3-32 32-32s32 14.3 32 32l0 20.6c58.3-12.5 104.1-58.4 116.6-116.6L384 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l20.6 0C392.1 165.7 346.3 119.9 288 107.4l0 20.6c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-20.6C165.7 119.9 119.9 165.7 107.4 224l20.6 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-20.6 0zM256 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>`;

var blob = new Blob(
  Array.prototype.map.call(
    document.querySelectorAll('script[type="text/js-worker"]'),
    function (oScript) {
      return oScript.textContent;
    }
  ),
  { type: "text/javascript" }
);

const worker = new Worker(window.URL.createObjectURL(blob), {
  type: "module"
});

const img = document.querySelector("img");

worker.postMessage({
  width: 20,
  height: 20,
  svg: svg
});

worker.onmessage = (event) => {
  img.src = event.data.pngUrl;
};
<script type="text/js-worker">
  import { DOMParser } from 'https://cdn.skypack.dev/@xmldom/xmldom@^0.7.5'
  import {
    Canvg,
    presets
  } from 'https://cdn.skypack.dev/canvg@^4.0.0'

  const preset = presets.offscreen({
    DOMParser
  })

  self.onmessage = async (event) => {
    const {
      width,
      height,
      svg
    } = event.data
    
    const canvas = new OffscreenCanvas(width, height)
    const ctx = canvas.getContext('2d')
    
    ctx.beginPath();
    ctx.arc(10, 10, 10, 0, 2 * Math.PI);
    ctx.fillStyle = 'blue';
    ctx.fill();
    
    const v = await Canvg.from(ctx, svg, preset)
    await v.render()

    const blob = await canvas.convertToBlob()
    const pngUrl = URL.createObjectURL(blob)

    self.postMessage({
      pngUrl
    })
  }
</script>

<img />

svg
Martin Hope
Eric G
Asked: 2024-12-18 00:54:49 +0800 CST
  • 5

我正在使用Web Worker 内部的canvg将 SVG 绘制到 OffscreenCanvas 中。

我将用黑色绘制 SVG。是否可以在不修改 SVG 本身或使用 CSS 的情况下将颜色应用于 SVG？如果可以，怎么做？

例如，我希望它用红色绘制。

const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 0c17.7 0 32 14.3 32 32l0 10.4c93.7 13.9 167.7 88 181.6 181.6l10.4 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-10.4 0c-13.9 93.7-88 167.7-181.6 181.6l0 10.4c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-10.4C130.3 455.7 56.3 381.7 42.4 288L32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l10.4 0C56.3 130.3 130.3 56.3 224 42.4L224 32c0-17.7 14.3-32 32-32zM107.4 288c12.5 58.3 58.4 104.1 116.6 116.6l0-20.6c0-17.7 14.3-32 32-32s32 14.3 32 32l0 20.6c58.3-12.5 104.1-58.4 116.6-116.6L384 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l20.6 0C392.1 165.7 346.3 119.9 288 107.4l0 20.6c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-20.6C165.7 119.9 119.9 165.7 107.4 224l20.6 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-20.6 0zM256 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>`;

var blob = new Blob(
  Array.prototype.map.call(
    document.querySelectorAll('script[type="text/js-worker"]'),
    function (oScript) {
      return oScript.textContent;
    }
  ),
  { type: "text/javascript" }
);

const worker = new Worker(window.URL.createObjectURL(blob), {
  type: "module"
});

const img = document.querySelector('img')

worker.postMessage({
  width: 20,
  height: 20,
  svg: svg
})

worker.onmessage = (event) => {
  img.src = event.data.pngUrl
}
<script type="text/js-worker">
  import { DOMParser } from 'https://cdn.skypack.dev/@xmldom/xmldom@^0.7.5'
import {
  Canvg,
  presets
} from 'https://cdn.skypack.dev/canvg@^4.0.0'

const preset = presets.offscreen({
  DOMParser
})

self.onmessage = async (event) => {
  const {
    width,
    height,
    svg
  } = event.data
  const canvas = new OffscreenCanvas(width, height)
  const ctx = canvas.getContext('2d')
  const v = await Canvg.from(ctx, svg, preset)

  // Render only first frame, ignoring animations and mouse.
  await v.render()

  const blob = await canvas.convertToBlob()
  const pngUrl = URL.createObjectURL(blob)

  self.postMessage({
    pngUrl
  })
}
</script>

<img />

svg
Martin Hope
Daniel_Kamel
Asked: 2024-12-05 22:48:49 +0800 CST
  • 5

在我的angularjs项目中，我曾经构建了一棵可折叠的树，我使用了这里d3js提供的代码。

现在我正在尝试添加一些简单的缩放和平移功能：

var initZoom = function () {
   var zoom = d3.zoom().extent([[0, 0], [width, height]]).scaleExtent([0.25, 10]).on('zoom', handleZoom);

   d3.select('#d3zoom').call(zoom);
};

var handleZoom = function (e) {
   d3.select('#d3zoom').attr('transform', e.transform);
};

HTML：

<div id="d3">
   <svg id="d3svg">
      <g id="d3zoom"></g>
   </svg>
</div>

这有效，但只有当我的鼠标光标已经悬停在 svg 中的某个项目（如节点或链接）上时才有效。但是，我想要的是无论我的鼠标光标在哪里，只要它在 svg 上，都可以平移和缩放，到目前为止，我还不知道该怎么做。

svg
Martin Hope
Dorian
Asked: 2024-10-05 04:02:36 +0800 CST
  • 6

我有这个 svg，它基本上是多边形内的“Y”，但我无法设法将多边形内的“Y”垂直和水平居中，这里是 svg：

        <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
            <title>Loader Logo</title>
            <g>
                <g id="Y" transform="translate(11.000000, 5.000000)">
                    <path
                          d="m 35,37.018555 c 3.686193,8.066969 7.372385,16.133937 11.058578,24.200905 0,6.557364 0,13.114728 0,19.672093 2.577904,0.07335 5.155807,0.146697 7.733711,0.220046 0,-6.753756 0,-13.507511 0,-20.261265 4.224292,-8.815029 8.450947,-17.628029 12.673514,-26.444539 -2.882118,-0.08201 -5.764235,-0.16401 -8.646353,-0.246014 -2.621719,5.556806 -5.242844,11.114115 -7.86433,16.671119 -2.596764,-5.705351 -5.191816,-11.412041 -7.78969,-17.116521 -2.929616,-0.08336 -5.859232,-0.166714 -8.788847,-0.250069 0.541139,1.184749 1.082278,2.369497 1.623417,3.554245 z"
                          fill="#64ffda"/>
                </g>
                <path id="outline"
                    stroke="#64ffda"
                    strokeWidth="5"
                    strokeLinecap="round"
                    strokeLinejoin="round"
            fill="none"
                    d="M 50, 5
                  L 11, 27
                  L 11, 72
                  L 50, 95
                  L 89, 73
                  L 89, 28 z"
                />
            </g>
        </svg>

我尝试了所有方法，从使用 CSS 到尝试绘制另一个 Y 居中的 svg，但都不起作用

svg