主页 / coding / 问题

问题[svg](coding)

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
Martin Hope
RaiuProGram
Asked: 2024-08-01 19:48:54 +0800 CST
  • 6

我有这个代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270 80">
    <path d="M 230 10 L 220 20 L 220 60 L 230 70 L 250 70 L 260 60 L 260 20 L 250 10 L 230 10" fill="#FF5500"/>
    <path d="M 235 20 L 230 25 L 230 55 L 235 60 L 245 60 L 250 55 L 250 25 L 245 20 L 235 20" fill-rule="evenodd"/>
</svg>

我希望第二条路径填充第一条路径上的一个洞。这个洞需要是透明的，而不是黑色的。

svg
Martin Hope
Ron
Asked: 2024-05-08 02:35:03 +0800 CST
  • 5

我正在尝试“合并”SVG 中的两个蒙版，并以两个蒙版的白色部分在我应用的形状中可见的方式应用它们。

我读到解决方案可能是 feComposite，但我无法让它工作......这就是我到目前为止所拥有的：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask1" x="0" y="0" width="200" height="200">
      <rect x="0" y="0" width="200" height="200" fill="black"/>
      <rect x="0" y="0" width="100" height="100" fill="white"/>
    </mask>
    <mask id="mask2" x="0" y="0" width="200" height="200">
      <rect x="0" y="0" width="200" height="200" fill="black"/>
      <rect x="100" y="100" width="100" height="100" fill="white"/>
    </mask>
    <filter id="combinedMask">
            <feComposite in="mask1" in2="mask2" operator="over"/>
    </filter>
  </defs>
  
  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#combinedMask)"/>
</svg

上述情况下所需的输出是这样的： 输出

svg
Martin Hope
marklovin
Asked: 2024-05-06 08:17:33 +0800 CST
  • 6

在提供的示例中，较小的形状比较大的形状动画快得多，因为它的笔划长度要短得多。

我的理解是，将stroke-dasharray100% 设置为 100% 而不是像素量应该可以实现此目的，但这样做会产生意想不到的结果，即笔划不会完全扩展形状的 100%。

.page-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column-gap: 2em;
  grid-row-gap: 2em;
}

.radar-wrapper {
  width: 300px;
  height: 300px;
}

.shape {
  fill: #ff4040;
  fill-opacity: .4;
  stroke: #ff4040;
  stroke-width: 2;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  animation: draw 5s infinite linear;
}

@keyframes draw {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
<div class="page-wrapper">
  <div class="radar-wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <polygon class="shape" points="116.67 3.97 155.96 123.88 243.39 32.89 174.14 138.38 299.79 150 174.14 161.62 243.39 267.11 155.96 176.12 116.67 296.03 133.3 170.95 15.05 214.99 123.21 150 15.05 85.01 133.3 129.05 116.67 3.975"></polygon>
</svg>
  </div>
  <div class="radar-wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <polygon class="shape" points="144.04 176.12 133.3 170.95 125.86 161.62 123.21 150 125.86 138.38 133.3 129.05 144.04 123.88 155.96 123.88 166.7 129.05 174.14 138.38 176.79 150 174.14 161.62 166.7 170.95 155.96 176.12 144.04 176.12"></polygon>
</svg>
  </div>
</div>

svg
Martin Hope
AlignedDev
Asked: 2024-03-09 00:06:15 +0800 CST
  • 6

我需要在我的 html 中渲染 SVG 文件。

该文档还没有让我到达那里。

我想从嵌入文件中提取 SVG

open System.IO
open System.Reflection

[<AbstractClass; Sealed>]
type Assets private () =
    static let assembly = Assembly.GetExecutingAssembly()

    static let readSvgResource fileName =
        use stream =
            assembly.GetManifestResourceStream($"Namespace.Assets.Svg.{fileName}.svg")

        use reader = new StreamReader(stream)
        reader.ReadToEnd()

    static member DownArrow =
        readSvgResource "downArrow"

然后有一个我可以重用的好函数。这就是我陷入困境并且无法编译的地方。这个函数应该是什么？

let renderSvg color (assetsSvg: string) = 
     div [ _style $"color: {color}" ] [ RenderView.AsString.xmlNode assetsSvg ]
svg
Martin Hope
jamieburchell
Asked: 2024-02-07 22:00:17 +0800 CST
  • 5

我怎样才能改变这个SVG，以便渐变从上到下连续循环，这样当红色从底部掉落时，它从顶部出现，当蓝色从底部掉落时，它从顶部出现。

这是我到目前为止所拥有的：

<svg width="300px" height="500px" viewBox="0 0 180 336">
  <rect x="80" y="50" width="20" height="100" fill="none" stroke="url(#grad)" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
   <defs>
      <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
         <stop offset="0%" stop-color="red">
            <animate attributeName="stop-color" dur="3s" repeatCount="indefinite" values="red;blue;red;"></animate>
         </stop>
         <stop offset="100%" stop-color="blue">
            <animate attributeName="stop-color" dur="3s" repeatCount="indefinite" values="blue;red;blue"></animate>
         </stop>
       </linearGradient>
   </defs>
</svg>

https://jsfiddle.net/hq7vfL98/

这看起来是从上到下弹跳，而不是如所描述的循环。

svg
Martin Hope
chrwahl
Asked: 2023-11-05 19:08:56 +0800 CST
  • 5

我想创建一个笔划为 12、半径为 20 的圆，并对其应用蒙版。问题在于，圆圈的顶部、底部、左侧和右侧被切掉，就像应用了方形蒙版一样，或者笔划不知何故溢出。我们有时会看到这样的问题，例如，当笔划与半径相比太宽（没有遮罩）时。但在这种情况下，12/20 并不是不合理的。我也尝试扩大数字，但问题仍然存在。

这可能是一个错误，但它看起来在不同浏览器之间或多或少是一致的（我在 Ubuntu 上测试了 Firefox、Chromium 和 Opera，在 Android 上测试了 Firefox 和 Google Chrome）。

在示例中，第一个圆有问题，第二个和第三个圆看起来不错，分别具有较大的半径或较小的笔画宽度。我对每个应用一个掩码，该掩码不应屏蔽任何内容（当然，我的用例要复杂得多，但这是最简单的表示形式）。

svg {
  border: solid 1px black;
}
<svg viewBox="0 0 180 80" xmlns="http://www.w3.org/2000/svg" stroke="black" fill="none">
  <defs>
    <mask id="mask01">
      <rect width="180" height="80" fill="white"/>
    </mask>
  </defs>
  <circle mask="url(#mask01)" cx="30" cy="40" r="20" stroke-width="12" />
  <circle mask="url(#mask01)" cx="90" cy="40" r="26" stroke-width="12" />
  <circle mask="url(#mask01)" cx="150" cy="40" r="20" stroke-width="8" />
</svg>

svg