问题标签 [svg-pattern]

我需要svg <pattern>在水平方向上重复一个<rect>。

我的意思是，svg <rect>它比图案大，所以我需要它在剩下的任何空间上水平重复。

我希望主要模式出现在中心，这正是现在正在发生的事情。我只需要让它在两边重复。

现在，我只能让它显示一次。

笔记：

• 图案是黑色三角形
• 1px dotted red边框来自svg元素

如何使模式在剩余的空间上重复？

我有一个响应式 SVG 容器，我需要我<pattern>的出现在每种情况下。

我是说：

• <pattern>三角形应以所有可能的宽度居中
• 左边/右边的空间必须重复三角形<pattern>

这可能吗？我知道可以使用 JS 动态重新计算模式位置。但我想svg只使用属性来做到这一点。

额外的：

很容易做到这一点background-image。我只想使用相同的方法<svg>。这可能吗？

我想使用滑块来控制SVG图案的旋转，.setAttribute('patternTransform','rotate(slider.value)')但它表示error:"patterntranfom:expected numbers".

在此处输入图像描述

如果有人对此问题有任何想法，我将不胜感激，

你可以在这里查看我的代码

https://plnkr.co/edit/uiUoJBQuCOAtKtWy

它基于 Rouby 之前的回答

我正在使用 Vue.js，并且正在创建使用形状图案作为背景的 SVG。图案工作正常，但每当我尝试通过传递道具动态更改图案填充的颜色时，它都不起作用。我确信我传递的道具是正确的，因为我在其他地方使用它。

我有一个填充了对角线图案的 svg 矩形，我想在其上应用渐变。所以渐变应该跨越带有图案的整个矩形，而不应该应用于每个图案项目。

这是我的代码：

结果是：

如您所见，我快到了，我不明白为什么渐变如此苍白，以及为什么每个图案项目的底部比顶部更透明。

这是一个 SVG。如果您将它直接添加到您的 HTML 页面，它将很好地呈现。请注意，文件夹的右侧有一个用黑白棋盘格图案完成的微妙阴影。

我想将其移至外部文件。我从 HTML 中引用它，如下所示：

但是，当这样引用时，SVG 将呈现，但模式不再有效。抽屉的右侧只是白色，没有显示棋盘格图案。我怀疑url(#checkers)不能在外部文件中使用。我该怎么做呢？

有人可以帮我解决这个问题：我能够添加带有填充图像的 SVG，但纵横比/缩放不能按预期工作。我尝试了一些解决方案，但都没有奏效。请帮忙。链接如下： https ://park-maksimir.hr/testnasve/

我想在吉他挑选形状的 svg 元素下适合图像

请参阅此处复制的示例 - https://codepen.io/canovice/pen/eYRmYKR - command + P 打印，我截取了 print/pdf 输出的截图：

问题：在网络上，两个图像都很清晰。在打印并保存为 PDF 时，<img>标签中的徽标保持清晰，而<svg>使用属性中的徽标则模糊<svg:pattern>, <svg:image>, <svg:rect>。fill

目的：我们的 Web 应用程序有许多 SVG 图表（想想散点图），它们使用团队徽标代替散点图点。我们希望用户能够打印这些图表，并将这些图表保存为 PDF，并带有清晰的图像。这是网络上图表的屏幕截图，带有清晰的徽标。当我们将其保存为 PDF 时，我们会看到模糊的徽标。

我们正在使用 react.js 和 d3.js 来构建我们的 Web 应用程序并创建我们的 svg 图表，尽管我们希望有一个针对 SVG 元素的 html 和 css 的解决方案。