How would I create a path/rect with a two-color stroke? E.g. if the stroke-width is 2px, I want the outer 1px to be black and the inner 1px to be blue. Should I use gradients or patterns, or will I need to resort to some sort of hack?
As far as I know there is no support for defining the position of the stroke with regards to the path/rect (inside, middle, outaide)
As in this this proposal: http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Stroke_position
I think you have to make two rects/paths and stroke them individually.
You could make Z's 2 piece solution a set so that it behaves and can be treated like a single Element
Related
I have a SVG-image map with many polygons, which are directly bordering and all have a white stroke. On hovering, that stroke should turn darkgrey and become wider. Easy CSS.
But my problem: As objects in SVG are rendered after one another, the wider stroke will not overlap the other object, but underlap it, which looks super ugly. Is there a way to make it overlap instead?
Thanks in advance,
snow
I have code like this:
<v-text-field label="Outlined" outlined />
After I focus this input text is going top left corner of input as expected but it's actually hovering the line:
What might be the reason?
I was trying to debug it and I find this very weird to me. Basically the label element has binded style left: 0 and position absolute ofcourse, then the outer dic which is .v-text-field-slot has position relative but the label is not actually starting at 0px from the left
It doesn't have any padding or something either:
So basically I have no clue why it doesn't stick to left side of the outer relative positioned div.
Actually thanks to Firefox I found out where the issue lays:
Because of the transform scale to 0.75 it's not at the very left of outer div. I'm now trying to find out the fix and I'm wondering why Vuetify didn't handle that.
I acutally found solution by modifing .v-label--active class:
.v-label--active {
transform: translateY(-28px) scale(1) !important;
font-size: 12px !important;
padding-right: 8px;
background-color: white;
}
but it's more like hack than real solution. Also if I will have this on some other background then white, it will look bad. So basically I'm still looking for solution but for now I'll move on with above css.
Edit: The real solution was that I was missing <v-app></v-app> wraping my entire app.
I intend to create a system with two columns of text. There will be lines that indicate connections between some paragraphs on the left with some paragraphs on the right that appear when you mouseover them. Should I be using d3.js or is that overkill for this purpose?
EDIT: to be clear, some of the paragraphs on the left may not be aligned with the ones on the right so there would be crossing diagonal lines all along the middle.
Krzysztof is correct in that you might want to consider more complex interactions in the future. If you really just need a line, though, then D3.js is definitely overkill. Several commenters have suggested CSS borders, but I don't know if that approach meets your needs. If you want to draw straight lines between paragraphs, those lines won't, presumably, always be strictly horizontal or vertical. A more flexible option would be to add an absolutely positioned <div> into the page, hiding or showing it as appropriate. The <div> can have a 1px height and a background color to simulate a line, and it can be transformed using translation and rotation to connect any two arbitrary points.
No, use CSS instead. If you provide HTML code then we can guide you with CSS. Check out CSS borders: http://www.w3schools.com/css/css_border.asp
it depends on many factors. If you need d3.js only for 'draw lines/arrows' then I think this is overkill (d3.js is bigger then jquery). This looks like some simple task with basic tools. But if this is data presentation, which in future may be more complex, and when you use d3 for other charts, it will be fine.
Edit: because OP edit:
Look at this in semantic way. If this is data presentation then yes, If this is graphic effect then no.
No. D3 = "Data-Driven Documents". D3 uses SVG, and adding an SVG into your page just to draw a line is an absolute overkill. As a rule, you should take the simplest approach, hence a CSS border should do the job
border-bottom: 2px solid red;
for example.
I have a number of transparent overlapping ellipses (as shown below).
I highlight each ellipse on mouseover, but it is impossible to highlight many ellipses because other ellipses have been drawn over them.
From my limited knowledge of svg, there are three solutions:
Find some way to only detect mouseovers on the edges of each ellipse.
Draw the ellipses using bezier curves.
Reorder the drawing of ellipses. I am not sure how to do this, or if it is even possible to solve it this way given all these shapes.
Any help is much appreciated!
Target areas in svg are only whatever is painted on-screen. So, in theory, your ellipses should be hoverable only on their strokes. If this is not the case then you might be setting your fill with something else than none (perhaps rgba(0,0,0,0) ?).
You might also also be setting the hover on the g element instead of the ellipse.
You can see an example here: http://jsfiddle.net/r65E9/
ellipse {
stroke: #fff;
stroke-width: 1;
fill: none;
}
ellipse:hover {
stroke: #f66;
}
I've built a frontend tool for zooming in/out of an SVG canvas, but when I zoom, any 1px strokes increase in width (visually). Is there a svg setting that will ensure that 1px strokes remain 1px (visually) when zoomed? I remember reading about it somewhere, but can't find the resource.
Try to add vector-effect="non-scaling-stroke" attribute to the path. Check HERE for details. Im guessing that's what you want?