I create flat line in using d3
<path d="M76.75,75.00981241717429L230.25,75.00981241717429L383.75,
75.00981241717429L537.25,75.009812417174291" stroke="#657DBB" class="line"
style="stroke-dasharray: none; stroke-width: 5; stroke-opacity: 1;">
Draws lines but in devtools have 0px height and when I use mask for limiting drawing area, mask covers all 0px elements, someone can help ?
What you see is the expected result. For calculating the bounding box of an element the .getBBox() method is used. The behavior of .getBBox is defined by the SVG spec in 4.5.23 Interface SVGLocatable (emphasis mine):
Returns the tight bounding box in current user space (i.e., after application of the ‘transform’ attribute, if any) on the geometry of all contained graphics elements, exclusive of stroking, clipping, masking and filter effects).
Since all the y-coordinates of your path's move and line-to commands equal 75.00981241717429 the height of the bounding as defined by the spec obviously is zero.
Related
Problem: Certain values of matrix3d cause a div not to render at all, but the inspector's highlight area for the div is the correct shape.
I have an app which uses the camera to recognize four dots near the corners of a rectangular object. I calculate a matrix from the positions of those dots to map a div with a certain size to the quadrilateral defined by the screen positions of the dots. This is all fine, but at certain arrangements of the dots, the div being transformed by the matrix does not render at all. After implementing this, I found this example, which does much the same thing I'm doing, albeit without the AR: http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/
If you inspect a div with such a matrix, the blue highlight has the correct shape, but the div doesn't render. It also seems not to calculate pointer events, otherwise the cursor style would be visible. If you run the following snippet, you should be able to inspect the div and highlight it to see the shape is ought to have.
.rect {
position:absolute;
left:0;
top:0;
width:736px;
height:414px;
transform-origin:0 0;
background:red;
cursor:crosshair;
}
<div class="rect" style="transform:matrix3d(0.009359283667, 0.010930981398, 0, 0.000104500516, -0.092142538522, -0.121434733223, 0, -0.000225136056, 0, 0, 1, 0, -21.813928384019, -10.640940675131, 0, -0.106409406751)"></div>
<div>Inspect my invisible sibling...</div>
I'm currently using .toFixed(12) on each element of the matrix after calculation and right before applying it to the div. In my prior research to solve this, it was suggested that it could be a precision problem, but that doesn't seem to be the case. I have tried down to .toFixed(6), but that served only to make the matrix less correct.
I see this in Chrome, Version 42.0.2311.135 (64-bit) and Safari Version 7.1.5 (9537.85.14.17). I haven't tried other browsers.
Now, Frank Ta's example doesn't seem to have the same problem as mine, so I suspect there is some way I could calculate the matrices differently such that they would render correctly. However, that's not relevant to what I'm asking. My question is this: Why do these certain matrices cause normal rendering to fail, but highlighting them in the inspector shows the expected shape?
I can give a list of additional examples of such matrices if it would help.
So, I'm in the process of building a website designer and I have come across something strange, if you set the text-shadow: 0 0 0 someColor on a element the shadow is actually applied, I have made a fiddle where this is very clear here FIDDLE.
Is this a bug?
It's not a bug in that it's not an incorrect implementation of the spec; the spec implies that a shadow is generated as long as the computed value is something other than none. The only values that can compute to none are none or initial.
Text shadows are drawn similarly to box shadows. Because of this, most of the behavior of text shadows follows the spec for box shadows. Nowhere in either spec is it stated that a value with all zeros should generate no shadow. All it says is that either property can take one of two possible values: none, or a comma-separated list of one or more <shadow> value groups, each of which corresponds to a set of values: in the case of text-shadow, it's [ <length>{2,3} && <color>? ]# as given in its own spec. As long as you have a value that isn't none, either spec assumes a shadow will be drawn and specifies all the behavior based on that assumption.
For both properties, even if you don't specify a color, both specs state that currentColor should be used (it says in prose that it's "taken from the color property" or "the resulting color of the ink that it shadows"; the result in code is currentColor).
Since the shadow is always drawn for a value other than none, and zero lengths result in a shadow that's exactly the same size as the text, what happens here then is probably the result of compositing two or more layers of semitransparent pixels due to anti-aliasing of the glyphs as well as the shadow (as stated in the comments). This applies not only to text shadows, but also box shadows, an archetypal example of which would be in a box with rounded corners, where the only hints of anti-aliasing are on the rounded corners themselves, and not the straight edges of the box. This also happens in all browsers, at least based on testing and prior experiences.
With all that said, if you absolutely cannot accept none as a value, you can always specify transparent for the color. The shadow will still be drawn, but since it's completely transparent, you won't see it.
If you want to remove a text-shadow, I suggest setting text-shadow: none;
text-shadow:none;
Optional. This is a value. If not specified, it defaults to 0. The higher this value, the bigger the blur; the shadow becomes
wider and lighter.
The blur property does not indicate no blur when set to zero.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
text-shadow: 0px 0px 0px #FFFFFF; these properties not for hide or show. move shadow up down, move shadow right left and blur level 0 is clear.
if you want hide Shadow Then : Write "text-shadow:;" but dont set any value it should be empty.
sorry for bad english :)
If you're building a page builder and want initial "empty" values (which they're not empty, the first two zeroes indicate positioning and the last how much blur) you may just want to set the color as a default to the element background color. Or you can change your blur value to -1.
text-shadow: 0 0 -1px red;
The other option I can think is to have them enable text-shadow and then put in your 0 0 0 red using an if else statement. Pseudocode:
if text-shadow option is checked
use text-shadow:0 0 0 red;
else
use text-shadow:none;
Good luck.
Currently, I am working on a project that is comparing state data with data from another country. One data point is percentage of protected land and I want to fill the a percentage of the state that matches the data point. So for example, if 25% of North Carolina is protected, then I want 25% of the state to fill. Currently, I am trying to use an svg and I want the fill to happen on page load.
Any suggestions or resources on how to do this would be greatly appreciated.
Example I drew up in Illustrator:
Here are my two cents:
You can have a linear gradient like this:
<linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="F1g"><stop stop-color="#00FF00" offset="0%" id="F1gst1"/><stop stop-color="#FFFFFF" offset="0%" id="F1gst2"/></linearGradient>
Then take the first stop element:
var firstStop = document.getElementById('F1gst1');
And then assign the percentage you want fill, with the attribute offset:
percentage = '35%'; firstStop.setAttribute('offset',percentage);
And that is the way in javascript. You need a gradient for every state (you can use a group) and maybe you will need to define a path object with a fill inside every state with the same form, so you can apply the linear gradient to that path fill attribute.
If you need an animation, you can set a setInterval, and add an '1%' every x miliseconds to make the effect, and stop every interval when the desired percentage is reached.
I hope this at least have given you a clue.
Regards.
This can be done by plain css and html: http://jsfiddle.net/haohcraft/rAPN5/1/
Basically, the trick is
You need a image which has a transparent inner field but
non-transparent outer field, like the image in the fiddle. And you
need to set z-index:1 in order to place it above the filled
<div>.
Set the filled <div> and the img to be position: absolute; width:90px; height:90px; in that case.
Then you can adjust the height of the filled div to show the percentage
Well, here's a pretty dumb way in Canvas...(and I'm assuming you mean you want a certain % of interior area filled).
Step 1: Dump a solid image of each state into Canvas
Step 2: Count the number of nonzero pixels
Step 3: Extract the edges using an edge extraction convolution
Step 4: For each line, iterate horizontally within each row within the shape, coloring in pixels until you've reached the x% of the shape you'd like to portray.
It is possible to do this in SVG, but you'd need to hand-tesselate the shape, track all your areas and then hand calculate the ones to fill and it wouldn't do what I think you want - which is to have a state fill up like it's a water container?
An alternative solution is, of course, to 3D print transparent containers in the shape of all 50 states, fill them with colored water to the desired levels. Photograph them, and then manipulate that image via an SVG filter (feImage + feColorMatrix+feComposite) to selectively fill an SVG image. This may be faster than learning tesselation (or Canvas).
ProgressBar looks promising and easy to use:
https://kimmobrunfeldt.github.io/progressbar.js/
Here's a nice Fiddle example:
https://jsfiddle.net/kimmobrunfeldt/72tkyn40/
Javascript:
// progressbar.js#1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/
var bar = new ProgressBar.Circle(container, {
color: '#aaa',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 4,
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: false
},
from: { color: '#aaa', width: 1 },
to: { color: '#333', width: 4 },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value);
}
}
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';
bar.animate(1.0); // Number from 0.0 to 1.0
DisplayObject.getBounds in actionscript returns the bounds of the object with the strokes included. The left, top, width, height properties of a SymbolInstance in JSFL don't seem to include the strokes. That's the only way I've found to get the bounds of a symbol from JSFL. Is there another way?
You are looking for the Edge object on a Shape. The Edge has a Stroke object that has a thickness property.
// This will show the selected shape's first edge's thickness:
fl.trace(fl.getDocumentDOM().selection[0].edges[0].stroke.thickness );
You will have to loop over all the shapes and all of their edges to determine final bounds (if you are confident that all the edges have the same thickness, just check one).
Strokes have 0 width to JSFL, when it comes to getting the bounds of an object.
The only method I can think of is to edit the symbol, select the shape, and either
1.) get the stroke size and add 1/2 of its value to your calculation, or
2.) convert the stroke to a fill (unreliable for complex outlines)
If you only wish to include the strokes but exact sizing is not crucial, you can just arbitrarily add some pixels to the result of getBounds.
I'm drawing line graphs on a canvas. The lines draw fine. The graph is scaled, every segment is drawn, color are ok, etc. My only problem is visually the line width varies. It's almost like the nib of a caligraphy pen. If the stroke is upward the line is thin, if the stroke is horizontal, the line is thicker.
My line thickness is constant, and my strokeStyle is set to black. I don't see any other properties of the canvas that affect such a varying line width but there must be.
Javascript:
var badCanvas = document.getElementById("badCanvas"),
goodCanvas = document.getElementById("goodCanvas"),
bCtx = badCanvas.getContext("2d"),
gCtx = goodCanvas.getContext("2d");
badCanvas.width = goodCanvas.width = badCanvas.height = goodCanvas.height = 300;
// Line example where the lines are blurry weird ect.
// Horizontal
bCtx.beginPath();
bCtx.moveTo(10,10);
bCtx.lineTo(200,10);
bCtx.stroke();
//Verticle
bCtx.beginPath();
bCtx.moveTo(30,30);
bCtx.lineTo(30,200);
bCtx.stroke();
// Proper way to draw them so they are "clear"
//Horizontal
gCtx.beginPath();
gCtx.moveTo(10.5,10.5);
gCtx.lineTo(200.5,10.5);
gCtx.stroke();
//Verticle
gCtx.beginPath();
gCtx.moveTo(30.5,30);
gCtx.lineTo(30.5,200);
gCtx.stroke();
// Change the line width
bCtx.lineWidth = 4;
gCtx.lineWidth = 4;
// Line example where the lines are blurry weird ect.
// Horizontal
bCtx.beginPath();
bCtx.moveTo(10,20.5);
bCtx.lineTo(200,20.5);
bCtx.stroke();
//Verticle
bCtx.beginPath()
bCtx.moveTo(50.5,30);
bCtx.lineTo(50.5,200);
bCtx.stroke();
// Proper way to draw them so they are "clear"
//Horizontal
gCtx.beginPath();
gCtx.moveTo(10,20);
gCtx.lineTo(200,20);
gCtx.stroke();
//Verticle
gCtx.beginPath();
gCtx.moveTo(50,30);
gCtx.lineTo(50,200);
gCtx.stroke();
HTML:
<h2>BadCanvas</h2>
<canvas id="badCanvas"></canvas>
<h2>Good Canvas</h2>
<canvas id="goodCanvas"></canvas>
CSS:
canvas{border:1px solid blue;}
Live Demo
My live demo basically just recreates what the MDN says. For even stroke widths you can use integers for coordinates, for odd stroke widths you want to use .5 to get crisp lines that fill the pixels correctly.
From MDN Article
If you consider a path from (3,1) to (3,5) with a line thickness of
1.0, you end up with the situation in the second image. The actual
area to be filled (dark blue) only extends halfway into the pixels on
either side of the path. An approximation of this has to be rendered,
which means that those pixels being only partially shaded, and results
in the entire area (the light blue and dark blue) being filled in with
a color only half as dark as the actual stroke color. This is what
happens with the 1.0 width line in the previous example code.
To fix this, you have to be very precise in your path creation.
Knowing that a 1.0 width line will extend half a unit to either side
of the path, creating the path from (3.5,1) to (3.5,5) results in the
situation in the third image — the 1.0 line width ends up completely
and precisely filling a single pixel vertical line.
If linewidth is an odd number, just add 0.5 to x or y.
I just solved a problem of a similar nature. It involved a bug in a For loop.
PROBLEM: I had created a for loop to create a series of connected line segments and noticed that the line was thick to start but thinned out significantly by the final segment (no gradients were explicitly used).
FIRST, DEAD END THOUGHT: At first I assumed it was the above pixel issue, but the problem persisted even after forcing all the segments to remain at a constant level.
OBSERVATION: I noticed that I made a newbie's mistake -- I only used a single "ctx.beginPath()" and "ctx.moveTo(posX,posY)" PRIOR to the For loop and a single "ctx.stroke()" AFTER the For loop and the loop itself wrapped a single ctx.lineTo().
SOLUTION: Once I moved all methods (.beginPath(), .moveTo(), .lineTo() and .stroke()) together into the For loop so they would all be hit on each iteration, the problem went away. My connected line had the desired uniform thickness.
Try lineCap = "round" and lineJoin = "round". See "Line Styles" in this PDF to see what these parameters do.
Edit 17-July-2015: Great cheat sheet, but the link is dead. As far as I can tell, there's a copy of it at http://www.cheat-sheets.org/saved-copy/HTML5_Canvas_Cheat_Sheet.pdf.