主页 / coding / 问题

问题[svg](coding)

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
Martin Hope
Chris Barr
Asked: 2024-09-17 02:03:16 +0800 CST
  • 5

我被委托设计一个网站，在背景中使用这种图案

重复的六边形图案

我认为 SVG 图案非常适合这种用途。我可以制作这些形状的单独一列，但我不确定是否可以用其他方式生成更好的形状。我的做法感觉不对而且效率低下，而且它无法扩展到整个屏幕作为背景图像。

svg {
  border: 1px solid #CCC;
}

svg * { 
  transform-box: fill-box;
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="780" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="hex" fill="#D4C1DE" fill-opacity="0.3" d="M0 25.980762113533157L15 0L45 0L60 25.980762113533157L45 51.96152422706631L15 51.96152422706631Z">
  </defs>
  
    <use xlink:href="#hex" transform-origin="center" x="0" y="0"   transform="scale(0.20)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="400" transform="scale(0.30)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="450" transform="scale(0.40)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="500" transform="scale(0.50)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="550" transform="scale(0.60)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="600" transform="scale(0.70)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="650" transform="scale(0.80)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="700" transform="scale(0.90)" />
    <use xlink:href="#hex" transform-origin="center" x="0" y="730" />
</svg>

有什么更实用的方法可以实现此处预期的效果？

svg
Martin Hope
Jake Shaw
Asked: 2024-09-03 11:29:33 +0800 CST
  • 5

我正在尝试增加这个旋转的 SVG 圆圈的厚度。我不知道这是笔触高度还是其他什么。我已经尽我所能，但似乎网站中的 SVG 编辑器不包含增加笔触厚度或笔触高度的选项。任何想法都将不胜感激！

svg {
  background:beige;
  Zoom: 4;
}
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
   <path fill="black" d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z">
   <animateTransform attributeName="transform" dur="2.25s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/>
   </path>
</svg>

svg