Questions tagged [stroke]
a line drawn along a path
465
questions
-1
votes
0
answers
21
views
Has anyone seen a hamburger nav pixelate/distort only on Safari (and not Chrome)?
I searched around a few different times now and have not seen anyone ask about this issue. Basically my theory is something with the stroke-offset or stroke-dasharray css that Safari does not like, ...
0
votes
0
answers
29
views
How to blend a stroke hlsl
I am working on a painting app, but I am struggling in how to implement opacity and flow,
for the flow I think is working:
This is what I am trying for the flow
float4 BrushSample = BrushTexture....
0
votes
0
answers
21
views
How to fix this stroke issue of vectorGrid plugin of Leaflet?
I have relatively large geojson data to output, so I used vectorgrid plugin to convert geojson to vector tiles.
I have used mouseover and mouseout events to add some level of interactivity (change the ...
0
votes
1
answer
48
views
maintain stroke while stretching shape, after effects
I am trying to stretch and expand this shape without changing the stroke weight but nothing seems to be working. I am working with stroke and using expression to keep the stroke proportionate but so ...
0
votes
0
answers
22
views
How to remove geoJSON shape stroke in Leaflet?
The situation is that of the image:
This is the code (see click event):
private initRegionsLayer() {
const layer = new GeoJSON(this.regions, {
style: (feature) =>
this....
0
votes
0
answers
43
views
CSS_Stroke to text
Are there any ways in CSS to give stroke to text (not in SVG) with different colors?
Target example:
I've tried this option, but seems that when one change font size to 1em or smaller, stroke "...
-1
votes
1
answer
41
views
How to set three different colors in html5 SVG circle surrounded by circles
How can I achieve something like this using SVG?
0
votes
0
answers
19
views
Android border stroke with proper corner
I have a textview which is having a dotted border as shown in the attached image.
In the image, only top left corner is having continuous right angled line, other corners are having dash gap. How can ...
0
votes
2
answers
113
views
how to make rectangle hollow in svg path
I am trying to make an svg like as shown below
My svg content is as shown below
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3....
0
votes
1
answer
111
views
How to make border of stroke SVG?
I am making gauge component using SVG.
Two strokes are used to display two states at once.
My current result is like this.
enter image description here
enter image description here
And want to make ...
1
vote
0
answers
31
views
Set stroke color with NSAttributedString but get the wired result when text contains "2"/"6" [duplicate]
I want to set the border with white color to label texts, and I used the NSAttributedString, set both strokeWidth&strokeColor, but when I run the project, the result is too wired with text "2&...
1
vote
1
answer
259
views
Changing the thickness of the solid font awesome icon issue
I´m trying to change the thickness of the svg icon (I need to make the stroke of the icon thinner). The icon in my project is defined as solid (fas) with no way to change it to regular or other (far) ...
0
votes
0
answers
90
views
google map direction with multiple colors [duplicate]
I trace route between two points using directions API google map .I want to use one color for the route starting from pickup point to the middle point route , and the other half of route another ...
0
votes
1
answer
105
views
How to add multiple colors in Konva dashed line stroke
Can someone please guide me to the right way of adding the white and black strokes as shown in the image?
Dotted line image
I've tried passing an array of colors to the stroke property but it doesn't ...
2
votes
2
answers
126
views
Painting stroke generation algorithm for robot arm
I am writing a code that generate start and end points of strokes of a picture (Raster images) to let robot arm paint.
I have wrote an algorithm but with too many overlapping strokes:
https://github....
0
votes
2
answers
53
views
Animate a SVG made only of one stroke
I'm a little bit confused, I have an SVG, made only of one stroke that needs to be animated (classic drawing icon animation).
I want to animate the icon like it was drawn from one end of the sroke, to ...
0
votes
0
answers
76
views
J5 - JavaScript can't find variable "strokeCap"
I'm trying to get into generative Art and using for the first time p5.js for that. Now, I've tried to follow a guide to understand the process. I did exactly how the guide told me to do so, now I'm ...
2
votes
3
answers
222
views
How to fix unwanted circle on / break down of SVG path element for Sankey links with d3?
I'm putting together a Sankey diagram via SVG but suddenly under some unknown conditions one of the paths show a circle where there shouldn't be any.
I tried to remove as much as possible from the my ...
1
vote
1
answer
53
views
How to remove a specific stroke in HTML5 canvas?
I make several strokes in a HTML5 canvas.
To make animation with stroke, I clear the previous like this :
// Notice : canvasWidth, canvasHeight, context are in a parent scope
function echoLine(...
0
votes
0
answers
119
views
clippath with stroke line not showing in fabric js
i want to clipPath my image with rectangle box. My rectangle box have stroke line. but after clipPath stroke line of box not looking as much width i have given to it. half of stroke line hiding by ...
0
votes
0
answers
112
views
stroke line not showing in fabric js
i want to clippath my image with rectangle box. My rectangle box have stroke line. but after clippath stroke line of box not looking as much width i have given to it. half of stroke line hiding by ...
0
votes
0
answers
84
views
clippath not working proper with stroke line
i have used latest fabric version(5.1). where i want to clip path my image with rectangle box. my rectangle box have stroke line. but after clip path stroke line of box not looking as much width i ...
0
votes
0
answers
519
views
How to control amcharts stroke width?
I am creating a chart width horizontal bar. I have removed the X grid line. and now I want to control Y grid line width.
This is current chart looks like.
Then i have tried this line categoryAxis....
0
votes
0
answers
611
views
How to make stroke-width scale with svg width but not with height?
I need strokes to scale with width but not with height.
This is the closest I've come to a solution:
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="50">
<rect width="100%" ...
3
votes
3
answers
369
views
How can I make a SVG stroke show a background?
I have an SVG with a gradient-like background and a foreground icon. Currently, the icon is just one filled path with polylines on top, but it can be instead split into multiple paths where the ...
1
vote
1
answer
192
views
When using Vuetify and importing icons with CDN, is there a way to control the stroke width of the svgs?
I am importing tabler icons in a cdn in my public html folder:
<link rel="stylesheet" href="https://unpkg.com/@tabler/icons@latest/iconfont/tabler-icons.min.css">
and per ...
0
votes
1
answer
375
views
SVG stroke animation not working in Safari
My JS code goes over each path, and adds a stroke-dasharray and stroke-dashoffset according to path length:
setTimeout(() => {
const $paths = document.getElementsByTagName('path');
for (...
-1
votes
1
answer
72
views
Trying to animate the Path StrokeProperty throws Invalid operation exception
I have code when a certain value is reached, I want to flash the Stroke of the Path to Red. When I try to apply the animation like this, it says "''System.Windows.Media.Animation.DoubleAnimation' ...
1
vote
1
answer
45
views
KonvaJS different strokes
I have a rectangle in KonvaJS:
<Rect
x={200}
y={20}
width={300}
height={150}
fill="yellow"
shadowBlur={3}
b
draggable
...
0
votes
0
answers
27
views
How to create Ink.Stroke can input like a textbox?
I use source code from RangPaint. All object is created to be Ink.Stroke.
Such as Line, Arrow,Rectangle like below.
Protected Overrides Sub DrawCore(ByVal drawingContext As DrawingContext, ByVal ...
0
votes
1
answer
245
views
Dashes doesn't start full at the beginning in circle svg
I want to create a dashed progress circle for grades. I want to make the length of dashes function of the grade max. (Ex : if the grade is 3.5/5, the dashes will be 24px long).
The problem is that the ...
3
votes
1
answer
287
views
Button Stroke Set Gap In specific position Swiftui
I have added the borders for all sides using code below in SwiftUI. I want to trim stroke a particular position like below.
Want to achieve:-
Output:-
Code:-
import SwiftUI
struct RoundTrimImage: ...
1
vote
1
answer
264
views
How do I animate SVG stroke to act as a gauge?
I have this code set up:
.gauge {
stroke-dasharray: 1000;
stroke-dashoffset: 500;
animation: dash 5s linear alternate;
}
@keyframes dash {
from {
stroke-dashoffset: 0;
}
to {
...
0
votes
1
answer
65
views
SVG <path > strokes and detexify database 'strokes'. How to go from on to the other?
I am trying to generate handwritten math text by using mathjax to convert tex to svg and then change svg paths to "strokes" obtained from detexify database github.
How can one convert ...
2
votes
1
answer
2k
views
MaterialCardView change background color and stroke color programmatically
Pro devs. I'll try to change the card view background and stroke color programmatically but all times card.setCardBackgroundColor() override the stroke color. Statically in XML, it works well. But ...
0
votes
0
answers
421
views
d3 tangled tree design
I've been trying to learn how to create a Norse Mythology family tree using D3 and was able to find some code that someone wrote on here that had the perfect layout of the Norse gods -> (found here)...
0
votes
1
answer
154
views
Performance problem of creating Strokes for an WPF InkCanvas programmatically
I asked a question in Cancel touch event on InkCanvas (.Net Framework) and didn't got an answer, so I tried to set the InkCanvas to HitTestVisible to false and get the StylusPoints over an API of the ...
1
vote
1
answer
35
views
Is there a way for SVG strokes to "skip" intersecting each other, the same sort of way that CSS has `text-decoration-skip-ink`?
I could probably manually fake it using a solid-edged drop shadow filter around the strokes, set to the background color, but that's neither resilient nor ideal.
Visually, instead of this:
I want to ...
0
votes
2
answers
745
views
SVG `fill` overlaps `stroke`
Having a circle it has fill and stroke. But I see that fill color overlaps little bit stroke. When I do stroke to none, I loose circle radius that was before, since its space released.
I expected ...
1
vote
1
answer
488
views
Applying cap on only one end of a stroked line in Android
Is it possible to apply a cap to only one of the two ends of a stroke while drawing in a Compose Canvas DrawScope context?
-2
votes
2
answers
111
views
Strokes behind text in HTML [closed]
How can I add strokes behind my title text in HTML
like this image:
Edit: You may also check out their website
0
votes
1
answer
95
views
Construct an Outlined Image with GDI?
I've done some research but drawn a blank. Is there anyway to achieve image outlining with GDI? I.e. transform this:
into this:
With the ability to have different stroke thicknesses and colors. In ...
1
vote
1
answer
465
views
SVG Path changes when applying CSS Transforms
Goal
Incorporate some SVG icons into HTML using the svg-tag. Add simple CSS :hover-effects using the transform-Property, mainly to rotate and/or translate single elements inside the svg-element.
...
1
vote
1
answer
395
views
Bad quality of circle stroke with gradient
Circle()
.trim(from: viewModel.lenghts[index].from, to: viewModel.lenghts[index].to)
.stroke(someGradient, style: StrokeStyle(lineWidth: 12.0, lineCap: .round, lineJoin: .round))
....
6
votes
2
answers
3k
views
Circle with an evenly dotted border in SwiftUI?
I'm trying to create a resizable button that has an evenly dotted circle border around it. If you simply put:
Circle()
.stroke(color, style: StrokeStyle(lineWidth: 3, lineCap: .butt, dash: [3, ...
0
votes
1
answer
144
views
SVG circle stroke opacity
Is it possible to make the circle's stroke opacity, and not having that inner circle?
Like this:
I can only do like this so far:
svg {
width: 200px;
}
<svg viewBox="0 0 100 100" xmlns="http:...
-1
votes
1
answer
30
views
Is it possible to add a texture to the stroke in Win2d?
The InkDrawingAttributes() properties does not provide any such values.
(C sharp)
2
votes
1
answer
525
views
How to fill SVG path with color upto a specific distance?
I have created an SVG as shown in the below image.
SVG Path
Here, I require to give color to the path only to a certain point. It is to represent the progress of a user in his journey.
I searched for ...
0
votes
1
answer
46
views
How do I "sharpen" the edge of the path in the image with Stroke Path?
I'm trying to use the stroke path function on a jagged path as shown in the image. I'd prefer to keep the line width, cap style, join style the same. I've tried adjusting the miter limit, going all ...
0
votes
1
answer
219
views
How to make a coloured stroke line around a Form Section in SwiftUI
Using Swift-5.4, iOS14.5, XCode12.5,
I am trying to create a coloured stroke line around a Form Section in SwiftUI.
My first trial was with .background like shown here:
(but this does not work since ...