stroke 相关问题

沿路径绘制的线条

有一个渐变，定义如下：有一个渐变，定义如下： <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="out-of-flow"> <defs>  <linearGradient id="circle-graph-blue-greenish-gradient"> <stop offset="0" stop-color="#00d5bd" /> <stop offset="100" stop-color="#24c1ed" /> </linearGradient> </defs> </svg> 它在 CSS 类中被引用，应用于另一个 <path> 中的 <svg>: .circle-graph-blue-greenish { stroke: url(#circle-graph-blue-greenish-gradient); stroke-width: 5; fill: transparent; stroke-linecap: round; stroke-linejoin: round; } svg { height: 50vh; } <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="out-of-flow"> <defs>  <linearGradient id="circle-graph-blue-greenish-gradient"> <stop offset="0" stop-color="#00d5bd" /> <stop offset="100" stop-color="#24c1ed" /> </linearGradient> </defs> </svg> <svg class="rotate-90" width="75%" viewBox="0 0 100 100"> <path class="circle-graph-underlay" d="M5,50 A45,45,0 1 1 95,50 A45,45,0 1 1 5,50"></path> <path d="M5,50 A45,45,0 1 1 95,50 A45,45,0 1 1 5,50" class="circle-graph circle-graph-blue-greenish" style="stroke-dashoffset: 251.677;stroke-dasharray: 282.783;"></path> </svg> 效果很好。我想将渐变定义移至 CSS 类中： .circle-graph-blue-greenish { stroke: linear-gradient(0deg, rgba(0,213,189,1) 0%, rgba(36,193,237,1) 100%); stroke-width: 5; fill: transparent; stroke-linecap: round; stroke-linejoin: round; } 但不幸的是它已经停止工作（没有可见的中风）。为什么这两个定义不相同？如何在 CSS 中定义 stroke 的渐变？ UPD 看来我可以移动颜色值： <stop offset="0" stop-color="var(--circle-graph-blue-greenish-gradient-color-1)" /> 总比没有好。想要在 CSS 中完成所有事情。 .pie { --my-color-1: #00d5bd; width: 200px; aspect-ratio: 1; border-radius: 50%; background-image: radial-gradient(circle, black 60%, transparent 60%), conic-gradient(transparent 75%, var(--my-color-1) 75%, var(--my-color-1) 84%, orange 84%, orange 92%, red 92%), radial-gradient(circle, black 65%, transparent 65%); } <div class="pie"></div>

html css svg linear-gradients stroke

回答 1 投票 0

如何在 CSS 中应用仅出现在各个字母外部的文本描边？

我正在尝试对我正在构建的网页的某些标题应用文本描边，但无论我是使用 -webkit-text-lines 还是将标题导出为 SVG，文本描边总是...

css text stroke

回答 2 投票 0

如何自动执行功能并将描边颜色按百分比更改为svg？

我正在接近js，但我很难做到以下操作。我在网页中使用 circlifull jquery 作为数据计数器，数据从服务器调用 ny api 并通过

javascript css stroke

回答 1 投票 0

在 React 中悬停时更改 svg 描边

在我的 React 项目中，我想在悬停时更改 svg 的描边颜色。我通过将 svg 导入为 ReactCompnent 然后有条件地发送 prop （useState 钩子来确定 wh...

css reactjs svg icons stroke

回答 3 投票 0

Imagemagick 未向“标签”运算符添加笔划

我有以下运行良好的代码，但是我想向标签文本添加笔划/边框以使其更加突出。我尝试过将标签笔画代码放在不同的地方......

command-line imagemagick stroke

回答 1 投票 0

尝试对 Path StrokeProperty 进行动画处理会抛出无效操作异常

我有代码，当达到某个值时，我想将路径的描边闪烁为红色。当我尝试像这样应用动画时，它会显示“''System.Windows.Media.Animation.DoubleAnimati...

wpf xaml storyboard stroke

回答 1 投票 0

无法在 NSAttributedString 中绘制圆角描边

我正在尝试使用 Swift 中的 NSMutableAttributedString 对文本应用圆角描边效果。我已经能够找到文本属性的各种 NSMutableAttributedString.Key 选项，例如颜色，...

ios swift nsattributedstring stroke

回答 1 投票 0

绘制 iText7 Canvas 线并不总是填满页面

我有以下代码将整页网格应用于现有的 A4 pdf 文档。它在我或其他人使用 iText 生成的 pdf 上运行良好，但是当我尝试在已创建的 PDF 上使用时......

pdf canvas line itext7 stroke

回答 1 投票 0

SwiftUI InsettableShape 与 .linesBorder

有人可以解释一下为什么我自己制作的符合 InsettableShape 的“myRectangle”不能与 .linesBorder 一起使用，但内置的 Rectangle() 可以吗？这是我的矩形c...

swiftui border shapes stroke insets

回答 1 投票 0

如何在使用 `use` 时为 SVG 图案着色

我期望三个对角条纹矩形分别用红色、绿色、黄色着色，但它绘制了仅对边框着色的空矩形。我期望三个对角条纹矩形分别用红色、绿色、黄色着色，但它绘制了仅对边框着色的空矩形。 <svg width="100%" viewBox="0,0,100,100" > <defs> <pattern id="strip" viewBox="0,0,1,1" width=".25" height=".5" stroke-width="0.1" > <path d="M0,0 l1,1" /> </pattern> <symbol id="stripe-rect"> <rect x="0" y="0" width="100%" height="100%" fill="url(#strip)" /> </symbol> </defs> <use href="#stripe-rect" width="50" height="25" stroke="red" /> <use href="#stripe-rect" y=30 width="50" height="25" stroke="green" /> <use href="#stripe-rect" y=60 width="50" height="25" stroke="yellow" /> </svg> 您可以在蒙版上使用图案，也可以在矩形上使用蒙版。该矩形位于由填充和描边组成“符号”的组中。 <svg width="100%" viewBox="0 0 100 100"> <defs> <pattern id="strip" viewBox="0 0 1 1" width="1%" height="1%" stroke-width=".1"> <path d="M0 0 l1 1" stroke="white"/> </pattern> <g id="stripe-rect" transform="translate(.5 .5)"> <rect width="50" height="24" mask="url(#m1)"/> <rect width="50" height="24" fill="none" stroke-width="1" /> </g> <mask id="m1"> <rect width="100%" height="100%" fill="url(#strip)" /> </mask> </defs> <use href="#stripe-rect" x="0" y="0" fill="red" stroke="red" /> <use href="#stripe-rect" x="0" y="25" fill="green" stroke="green" /> <use href="#stripe-rect" x="0" y="50" fill="yellow" stroke="yellow" /> </svg>

svg design-patterns stroke

回答 1 投票 0

Tkinter 添加笔划到文本

我不知道如何使用 create_text 方法向文本添加笔划。方法本身没有定义大纲选项，有人知道方法吗？谢谢！

python tkinter stroke

回答 2 投票 0

使用SVG滤镜创建内部描边

我想在 svg 路径上模拟“内部笔画”。我有一个 svg 地图，其中包含多个复杂路径（国家/地区），每个路径都有不同的填充颜色描边。我想添加一个“假里面

svg stroke svg-filters

回答 4 投票 0

SVG描边颜色不会改变

我无法更改 SVG 上的描边颜色。这里我有一个来自 Material Symbols 库的 SVG，它显示为黑色：我无法更改 SVG 上的描边颜色。这里我有一个来自 Material Symbols 库的 SVG，它以黑色显示： <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"> <path d="M280-600v-80h560v80H280Zm0 160v-80h560v80H280Zm0 160v-80h560v80H280ZM160-600q-17 0-28.5-11.5T120-640q0-17 11.5-28.5T160-680q17 0 28.5 11.5T200-640q0 17-11.5 28.5T160-600Zm0 160q-17 0-28.5-11.5T120-480q0-17 11.5-28.5T160-520q17 0 28.5 11.5T200-480q0 17-11.5 28.5T160-440Zm0 160q-17 0-28.5-11.5T120-320q0-17 11.5-28.5T160-360q17 0 28.5 11.5T200-320q0 17-11.5 28.5T160-280Z"/> </svg> 我已通过向 stroke="#ff0000" 和 <svg> 标记添加 <path> 属性来修改它，但没有效果。我也尝试过stroke="currentColor"并通过CSS设置父级的颜色属性，但没有效果。我已经阅读了各种 stackoverflow 问题的回复，例如 this one，但没有一个建议对我有用。我不知道我可能做错了什么。 stroke属性指的是path元素的轮廓。您可以通过添加 stroke="#ff0000" 来查看 stroke-width="10" 更改所产生的效果。然而，这可能不是您想要的。相反，如果添加 fill="#ff0000"，您将更改路径本身的颜色。这很可能就是您想要的。 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"> <path fill="#ff0000" d="M280-600v-80h560v80H280Zm0 160v-80h560v80H280Zm0 160v-80h560v80H280ZM160-600q-17 0-28.5-11.5T120-640q0-17 11.5-28.5T160-680q17 0 28.5 11.5T200-640q0 17-11.5 28.5T160-600Zm0 160q-17 0-28.5-11.5T120-480q0-17 11.5-28.5T160-520q17 0 28.5 11.5T200-480q0 17-11.5 28.5T160-440Zm0 160q-17 0-28.5-11.5T120-320q0-17 11.5-28.5T160-360q17 0 28.5 11.5T200-320q0 17-11.5 28.5T160-280Z"/> </svg> 有关 fill 和 stroke 之间差异的更多信息，请参阅此文档。

css svg colors stroke

回答 1 投票 0

仅在内部或仅在外部描边 SVG 路径

考虑 2 个 html svg 路径，一个具有相同高度的正方形（内部类）和一个矩形（外部类）。当我应用描边宽度：10px时，描边将应用到内部5px和外部5px。小提琴 ...

html css svg stroke

回答 2 投票 0

使用SVG的部分边框/描边

我正在使用 svg/d3 创建由“矩形”元素组成的图表。为每个矩形添加部分边框/描边（仅在矩形顶部）的最佳方法是什么？谢谢

javascript html svg d3.js stroke

回答 2 投票 0

可组合按钮边框描边看起来很奇怪

我正在尝试实现一个带有黑色容器颜色和白色边框的按钮，但是笔划的边缘也在其上添加了黑色，我不知道为什么。代码： @可组合有趣的按钮（）{ ...