I have a page to tests that has objects, SVG, that are added after a click.
This is like:
startbox (added by default)
then we can added more obejcts that will be connected by a “brick-connector” (line)
When added, it is created, dynamically a < g > and inside a < svg >, like:
<g _ngcontent-c6="" nea-sequence-editor-brick-connector="" _nghost-c8="" ng-reflect-brick-connector="[object Object]"><polyline _ngcontent-c8="" class="line strok1" points="160,120 160,170" style="stroke: rgb(128, 128, 128);"></polyline><polyline _ngcontent-c8="" class="line strok18" points="160,120 160,170" style="stroke: transparent;"></polyline><polygon _ngcontent-c8="" class="line strok1" points="155,165 160,170 165,165" style="stroke: rgb(128, 128, 128); fill: rgb(128, 128, 128);"></polygon></g>
<g _ngcontent-c6="" nea-sequence-editor-brick-connector="" _nghost-c8="" ng-reflect-brick-connector="[object Object]"><polyline _ngcontent-c8="" class="line strok1" points="160,370 160,410" style="stroke: rgb(128, 128, 128);"></polyline><polyline _ngcontent-c8="" class="line strok18" points="160,370 160,410" style="stroke: transparent;"></polyline><polygon _ngcontent-c8="" class="line strok1" points="155,405 160,410 165,405" style="stroke: rgb(128, 128, 128); fill: rgb(128, 128, 128);"></polygon></g>
<g _ngcontent-c6="" nea-sequence-editor-brick="" _nghost-c9="" ng-reflect-item="[object Object]"><!--bindings={
"ng-reflect-ng-if": "true"
}--><svg _ngcontent-c9="" class="nea-svg" x="110" y="20" width="100" height="100" style=""><rect _ngcontent-c9="" class="nea-svg-rect" fill="green" rx="25" ry="25" x="1" y="1" width="98" height="98"></rect><svg _ngcontent-c9="" height="200" width="200"><text _ngcontent-c9="" fill="white" style="font-size:14px" x="25" y="50">START</text></svg><circle _ngcontent-c9="" class="nea-svg-rect-circle" cx="50" cy="100" r="10"></circle></svg><!--bindings={
"ng-reflect-ng-if": "false"
}--></g>
<g _ngcontent-c6="" nea-sequence-editor-brick="" _nghost-c9="" ng-reflect-item="[object Object]"><!--bindings={
"ng-reflect-ng-if": "false"
}--><!--bindings={
"ng-reflect-ng-if": "true"
}--><svg _ngcontent-c9="" class="nea-svg" x="60" y="170" width="200" height="200"><rect _ngcontent-c9="" class="nea-svg-rect" rx="10" ry="10" ng-reflect-ng-style="[object Object]" x="1" y="1" width="198" height="198" style="stroke: rgba(85, 68, 153, 0.867); stroke-width: 4; fill: rgb(0, 114, 187);"></rect><text _ngcontent-c9="" fill="#fff" style="cursor:pointer" x="180" y="20">x</text><text _ngcontent-c9="" fill="white" style="font-size: 14px" x="10" y="20">System: AnalyseErrors</text><line _ngcontent-c9="" x1="2" x2="198" y1="30" y2="30" ng-reflect-ng-style="[object Object]" style="stroke: rgba(85, 68, 153, 0.867); stroke-width: 4;"></line><svg _ngcontent-c9="" class="nea-svg-rect-arg" height="200" width="200"><text _ngcontent-c9="" fill="white" style="font-size:14px" x="130" y="50">Result1</text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="10" y="50">Parameter 1 </text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="130" y="70">6</text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="10" y="70">Parameter 2: </text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="130" y="90">10</text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="10" y="90">Parameter 3: </text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="130" y="110">left</text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="10" y="110">Parmeter 4: </text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="130" y="135">Result3</text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="10" y="135">Result : </text></svg><line _ngcontent-c9="" x1="2" x2="198" y1="145" y2="145" ng-reflect-ng-style="[object Object]" style="stroke: rgba(85, 68, 153, 0.867); stroke-width: 4;"></line><text _ngcontent-c9="" fill="white" style="font-size:14px" x="10" y="165">test</text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="10" y="185">res2</text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="50" y="185">=</text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="65" y="185">10</text><circle _ngcontent-c9="" class="nea-svg-rect-circle" cx="100" cy="200" r="10"></circle></svg></g>
<g _ngcontent-c6="" nea-sequence-editor-brick="" _nghost-c9="" ng-reflect-item="[object Object]"><!--bindings={
"ng-reflect-ng-if": "false"
}--><!--bindings={
"ng-reflect-ng-if": "true"
}--><svg _ngcontent-c9="" class="nea-svg" x="60" y="410" width="200" height="200"><rect _ngcontent-c9="" class="nea-svg-rect" rx="10" ry="10" ng-reflect-ng-style="[object Object]" x="1" y="1" width="198" height="198" style="stroke: rgba(85, 68, 153, 0.867); stroke-width: 4; fill: rgb(0, 114, 187);"></rect><text _ngcontent-c9="" fill="#fff" style="cursor:pointer" x="180" y="20">x</text><text _ngcontent-c9="" fill="white" style="font-size: 14px" x="10" y="20">System: CheckAbortCycle</text><line _ngcontent-c9="" x1="2" x2="198" y1="30" y2="30" ng-reflect-ng-style="[object Object]" style="stroke: rgba(85, 68, 153, 0.867); stroke-width: 4;"></line><svg _ngcontent-c9="" class="nea-svg-rect-arg" height="200" width="200"><text _ngcontent-c9="" fill="white" style="font-size:14px" x="130" y="50">Result1</text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="10" y="50">Parameter 1 </text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="130" y="70">6</text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="10" y="70">Parameter 2: </text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="130" y="90">10</text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="10" y="90">Parameter 3: </text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="130" y="110">left</text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="10" y="110">Parmeter 4: </text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="130" y="135">Result3</text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="10" y="135">Result : </text></svg><line _ngcontent-c9="" x1="2" x2="198" y1="145" y2="145" ng-reflect-ng-style="[object Object]" style="stroke: rgba(85, 68, 153, 0.867); stroke-width: 4;"></line><text _ngcontent-c9="" fill="white" style="font-size:14px" x="10" y="165">test</text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="10" y="185">res2</text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="50" y="185">=</text><text _ngcontent-c9="" fill="white" style="font-size:14px" x="65" y="185">10</text><circle _ngcontent-c9="" class="nea-svg-rect-circle" cx="100" cy="200" r="10"></circle></svg></g>
I’m trying to select each object, get all field from the boxes and move,
I having problem with xpath and selecting by class.
Do you have a suggestion?
I'm thinking in getting all classes "nea-svg"", the the text of each. After this, i may get all related "nea-sequence-editor-brick".
As this is a big project, i added a extension go chrome to get xpath and css selectors but, even this fails to retrieve the correct one.
I'm new in protractor and jasmine.
Related
I am using d3-svg-legend ( https://d3-legend.susielu.com/) to create a legend based on size. I want to replicate this example: https://d3-legend.susielu.com/#size-line
The code I am using is:
let svg = d3.select(this.refs.canvas).append('svg');
const g = svg.append("g");
var lineSize = d3.scaleLinear().domain([0,10]).range([2, 10]);
g.attr("transform", "translate(20,20)")
.call(legendSize()
.scale(lineSize)
.shape("line")
.orient("horizontal")
.shapeWidth(40)
.labelAlign("start")
.shapePadding(10)
);
This code produces the following output:
<div style="margin-left: auto; margin-right: 20px;">
<svg>
<g transform="translate(20,20)">
<g class="legendCells"><g class="cell" transform="translate(0, 5)">
<line class="swatch" x1="0" x2="40" y1="0" y2="0" stroke-width="2" style="fill: rgb(153, 216, 201);"></line>
<text class="label" transform="translate( 0,15)" style="text-anchor: start;">0.0</text></g><g class="cell" transform="translate(50, 5)">
<line class="swatch" x1="0" x2="40" y1="0" y2="0" stroke-width="4" style="fill: rgb(211, 74, 65);"></line>
<text class="label" transform="translate( 0,15)" style="text-anchor: start;">2.5</text>
</g>
<g class="cell" transform="translate(100, 5)">
<line class="swatch" x1="0" x2="40" y1="0" y2="0" stroke-width="6" style="fill: rgb(255, 0, 0);"></line>
<text class="label" transform="translate( 0,15)" style="text-anchor: start;">5.0</text>
</g>
<g class="cell" transform="translate(150, 5)">
<line class="swatch" x1="0" x2="40" y1="0" y2="0" stroke-width="8" style="fill: rgb(255, 0, 0);"></line>
<text class="label" transform="translate( 0,15)" style="text-anchor: start;">7.5</text>
</g>
<g class="cell" transform="translate(200, 5)">
<line class="swatch" x1="0" x2="40" y1="0" y2="0" stroke-width="10" style="fill: rgb(255, 0, 0);"></line>
<text class="label" transform="translate( 0,15)" style="text-anchor: start;">10.0</text>
</g>
</g>
</g>
</svg>
</div>
But it doesn't display any legend other than the labels (i.e. it doesn't display the line elements):
If you look at the same example, you'll see that she's setting the stroke using a <style> tag in the <head>:
.legendSizeLine line {
stroke: rgb(46, 73, 123);
}
That's necessary because the default <line> stroke is "none".
Here is your SVG with that style:
line {
stroke: rgb(46, 73, 123);
}
text {
font: 12px sans-serif;
}
<div style="margin-left: auto; margin-right: 20px;">
<svg>
<g transform="translate(20,20)">
<g class="legendCells">
<g class="cell" transform="translate(0, 5)">
<line class="swatch" x1="0" x2="40" y1="0" y2="0" stroke-width="2" style="fill: rgb(153, 216, 201);"></line>
<text class="label" transform="translate( 0,15)" style="text-anchor: start;">0.0</text>
</g>
<g class="cell" transform="translate(50, 5)">
<line class="swatch" x1="0" x2="40" y1="0" y2="0" stroke-width="4" style="fill: rgb(211, 74, 65);"></line>
<text class="label" transform="translate( 0,15)" style="text-anchor: start;">2.5</text>
</g>
<g class="cell" transform="translate(100, 5)">
<line class="swatch" x1="0" x2="40" y1="0" y2="0" stroke-width="6" style="fill: rgb(255, 0, 0);"></line>
<text class="label" transform="translate( 0,15)" style="text-anchor: start;">5.0</text>
</g>
<g class="cell" transform="translate(150, 5)">
<line class="swatch" x1="0" x2="40" y1="0" y2="0" stroke-width="8" style="fill: rgb(255, 0, 0);"></line>
<text class="label" transform="translate( 0,15)" style="text-anchor: start;">7.5</text>
</g>
<g class="cell" transform="translate(200, 5)">
<line class="swatch" x1="0" x2="40" y1="0" y2="0" stroke-width="10" style="fill: rgb(255, 0, 0);"></line>
<text class="label" transform="translate( 0,15)" style="text-anchor: start;">10.0</text>
</g>
</g>
</g>
</svg>
</div>
I cannot seem to get this mask to work with my animation in SVG. What is wrong with this code? The green arrow should be masked out from the rightmost side of the circle, so that the arrow appears to be consumed by the circle upon contact.
<svg height="200" width="1200" viewBox="0 0 200 200">
<defs>
<mask id="mask1" x="0" y="0" width="700" height="110" >
<rect x="0" y="0" width="550" height="110" style="stroke:none; fill:white" />
<rect x="550" y="0" width="50" height="110" style="stroke:none; fill:black"/>
</mask>
</defs>
<polygon id="arrow" z-index="1" points="0,5 0,105 105,55" mask="url(#mask1)" fill="green">
<animateTransform attributeName="transform" type="translate" attributeType="XML" values="0, 0; 550, 0; 550, 0" keyTimes="0; .7; 1" dur="3s" repeatCount="indefinite" additive="sum"/>
<animate attributeName="opacity" values="1; 1; 0" keyTimes="0; .5; 1" dur="3s" repeatCount="indefinite" />
</polygon>
<circle z-index="1" cx="550" cy="55" r="49" stroke-width="6" stroke="black" fill="gray"/>
<circle z-index="2" cx="550" cy="55" r="49" stroke-width="6" stroke="black" fill="none"/>
<circle id="greenCircle" z-index="2" cx="550" cy="55" r="49" stroke-width="6" stroke="green" fill="none"/>
<animate id="fillGreen" xlink:href="#greenCircle" attributeName="stroke-dasharray" values="154, 0, 154, 0; 0, 308, 0, 0; 0, 308, 0, 0" keyTimes="0; 0.5; 1" dur="3s" repeatCount="indefinite" />
<circle id="blackCircle" z-index="2" cx="550" cy="55" r="49" stroke-width="6" stroke="green" fill="none"/>
<animate id="fillBlack" xlink:href="#blackCircle" attributeName="stroke-dasharray" values="0, 154, 0, 154; 0, 154, 0, 154; 0, 0, 308, 0" dur="3s" keyTimes="0; 0.5; 1" repeatCount="indefinite" />
</circle>
</svg>
The transform applies to the mask too so as the polygon moves, so does the mask. You need to set the mask on something that doesn't move e.g.
<svg height="200" width="1200" viewBox="0 0 200 200">
<defs>
<mask id="mask1" x="0" y="0" width="700" height="110" >
<rect x="0" y="0" width="550" height="110" style="stroke:none; fill:white" />
<rect x="550" y="0" width="50" height="110" style="stroke:none; fill:black"/>
</mask>
</defs>
<g mask="url(#mask1)" >
<polygon id="arrow" z-index="1" points="0,5 0,105 105,55" fill="green">
<animateTransform attributeName="transform" type="translate" attributeType="XML" values="0, 0; 550, 0; 550, 0" keyTimes="0; .7; 1" dur="3s" repeatCount="indefinite" additive="sum"/>
<animate attributeName="opacity" values="1; 1; 0" keyTimes="0; .5; 1" dur="3s" repeatCount="indefinite" />
</polygon>
</g>
<circle z-index="1" cx="550" cy="55" r="49" stroke-width="6" stroke="black" fill="gray"/>
<circle z-index="2" cx="550" cy="55" r="49" stroke-width="6" stroke="black" fill="none"/>
<circle id="greenCircle" z-index="2" cx="550" cy="55" r="49" stroke-width="6" stroke="green" fill="none"/>
<animate id="fillGreen" xlink:href="#greenCircle" attributeName="stroke-dasharray" values="154, 0, 154, 0; 0, 308, 0, 0; 0, 308, 0, 0" keyTimes="0; 0.5; 1" dur="3s" repeatCount="indefinite" />
<circle id="blackCircle" z-index="2" cx="550" cy="55" r="49" stroke-width="6" stroke="green" fill="none"/>
<animate id="fillBlack" xlink:href="#blackCircle" attributeName="stroke-dasharray" values="0, 154, 0, 154; 0, 154, 0, 154; 0, 0, 308, 0" dur="3s" keyTimes="0; 0.5; 1" repeatCount="indefinite" />
</circle>
</svg>
I have a use case where I have to load a hash pattern inside an svg.
So since, its a graph we are using inner elements as group elements like this.
<svg>
... ... ...
<g class="random-data-task" aria-selected="false" aria-describedby="task3">
<defs>
<pattern id="pattern-stripe" patternUnits="userSpaceOnUse" patternTransform="rotate(45)" width="2" height="23">
<rect width="341.33333333333337" height="23" style="fill: #fff;" x="153.6217133163698" y="50"></rect>
</pattern>
</defs>
<rect x="153.6217133163698" y="50" width="341.33333333333337" height="23" class="random-data-bar" style="fill: #f4f4f4;"></rect>
<rect x="153.6217133163698" y="50" width="341.33333333333337" height="23" class="random-data-bar" style="fill: url(#pattern-stripe); stroke: #f4f4f4; opacity: 1;"></rect>
</g>
... ... ... </svg>
So, while doing this, the pattern is not visible.
But when I try to use an svg and make each rect (bar) as svg, I'm able to see the pattern I want, but this won't re-scale my bars when I zoom in or out, since its going to rendered in a time-range.
<svg>
... ... ...
<svg class="random-data-task" aria-selected="false" aria-describedby="task3">
<defs>
<pattern id="pattern-stripe" patternUnits="userSpaceOnUse" patternTransform="rotate(45)" width="2" height="23">
<rect width="341.33333333333337" height="23" style="fill: #fff;" x="153.6217133163698" y="50"></rect>
</pattern>
</defs>
<rect x="153.6217133163698" y="50" width="341.33333333333337" height="23" class="random-data-bar" style="fill: #f4f4f4;"></rect>
<rect x="153.6217133163698" y="50" width="341.33333333333337" height="23" class="random-data-bar" style="fill: url(#pattern-stripe); stroke: #f4f4f4; opacity: 1;"></rect>
</svg>
... ... ...
here is the code for my hash bars looks like
const renderHashedBarGroup = (scale, taskData, taskPath) => {
const _args = generatorArgs(scale, taskData, taskPath);
(taskData.isBackGround ? getBackgroundHashedBar : getForeGroundHashedBar)(
_args.path.append("defs"),
_args.path,
_args.x,
_args.y,
_args.width,
_args.height,
taskData.isBackGround ? "#d3d4d5" : "#f4f4f4"
);};
const getBackgroundHashedBar = (defs, path, x, y, width, height, color) => {
const patternId = "pattern-stripe-background";
if (d3.select(`#${patternId}`).empty()) {
defs.append("pattern")
.attr("id", patternId)
.attr("patternUnits", "userSpaceOnUse")
.attr("patternTransform", "rotate(135)")
.attr("width", "7")
.attr("height", height)
.append("rect")
.attr("width", "2")
.attr("height", height)
.attr("style", "fill: #fff;");
}
// Draw the background rect
getRect(path, x, y, width, height)
.classed(styles.taskBar, true)
.attr("style", `fill: ${color}; stroke: ${color}; opacity: 0.3`);
// Opacity for bar with hashes
getRect(path, x, y, width, height)
.classed(styles.taskBar, true)
.attr("style", `fill: url(#${patternId}); opacity: 0.7;`);
return path; };
const drawTasks = (scale, config, trackLabel, taskGroupPath, tasks) => {
const taskPath = taskGroupPath
.selectAll("g")
.data(
tasks.map((a) =>
processTask(config, trackLabel, utils.deepClone(a))
)
);
taskPath
.enter()
.append("g")
.classed(styles.task, true)
.attr("aria-selected", false)
.attr("aria-describedby", (d) => d.key)
.each(function(d) {
d.percentage
? renderPercentageBarGroup(scale, d, this)
: d.hasOwnProperty("isHashed") && d.isHashed
? renderHashedBarGroup(scale, d, this)
: renderBarGroup(scale, d, this);
});
taskPath
.exit()
.transition(constants.d3Transition)
.remove();
};
If you don't understand what is happening first remove all that complicates the stuff. Here it is the rotation and almost all colors used are nearly white.
Even setting the rotation to 0 and colors to bright contrasty values we do not see any pattern.
The reason is that the pattern repeats every 2 pixels `width="2"
<pattern id="pattern-stripe" patternUnits="userSpaceOnUse"
patternTransform="rotate(0)" width="2" height="23">
But only at x=153 something is defined in the pattern
<rect width="341" height="23" style="fill: #fff;" x="153" y="50"></rect>
Result you don't see a thing.
If you set the width to a larger value then the x coord of your pattern rect you see in both cases a pattern.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<svg width="700" height="100">
<defs>
<pattern id="pattern-stripe" patternUnits="userSpaceOnUse" patternTransform="rotate(45)" width="200" height="23">
<rect width="341" height="23" fill="yellow" x="153" y="0"></rect>
</pattern>
</defs>
<g class="random-data-task" aria-selected="false" aria-describedby="task3">
<rect x="53" y="50" width="341" height="23" class="random-data-bar" style="fill: #f40000;"></rect>
<rect x="53" y="50" width="341" height="23" class="random-data-bar" fill="url(#pattern-stripe)" style="stroke: #00f400; opacity: 1;"></rect>
</g>
</svg>
<hr/>
<svg width="700" height="100">
<svg>
<defs>
<pattern id="pattern-stripe2" patternUnits="userSpaceOnUse" patternTransform="rotate(45)" width="200" height="23">
<rect width="41" height="23" fill="lime" x="153" y="0"></rect>
</pattern>
</defs>
<rect x="53" y="50" width="341" height="23" class="random-data-bar" style="fill: #0000f4;"></rect>
<rect x="53" y="50" width="341" height="23" class="random-data-bar" fill="url(#pattern-stripe2)" style="stroke: steelblue; opacity: 1;"></rect>
</svg>
</svg>
<hr/>
<p>From code inspection, what is wanted</p>
<svg width="700" height="100">
<defs>
<pattern id="pattern-stripe3" patternUnits="userSpaceOnUse" patternTransform="rotate(135)" width="7" height="23">
<rect width="2" height="23" fill="yellow" x="0" y="0"></rect>
</pattern>
</defs>
<g class="random-data-task" aria-selected="false" aria-describedby="task3">
<rect x="53" y="50" width="341" height="23" class="random-data-bar" style="fill: #f40000;"></rect>
<rect x="53" y="50" width="341" height="23" class="random-data-bar" fill="url(#pattern-stripe3)" style="stroke: #00f400; opacity: 1;"></rect>
</g>
</svg>
<hr/>
<p>With a single rect that has a pattern</p>
<svg width="700" height="100">
<defs>
<pattern id="pattern-stripe4" patternUnits="userSpaceOnUse" patternTransform="rotate(135)" width="7" height="23">
<rect width="2" height="23" fill="yellow" x="0" y="0"></rect>
<rect width="5" height="23" fill="red" x="2" y="0"></rect>
</pattern>
</defs>
<g class="random-data-task" aria-selected="false" aria-describedby="task3">
<rect x="53" y="50" width="341" height="23" class="random-data-bar" fill="url(#pattern-stripe4)" style="stroke: #00f400; opacity: 1;"></rect>
</g>
</svg>
</body>
</html>
What exactly do you want to show/visualize with this overlay pattern?
Edit
I have added a shape based on the widths from your code and a shape with the same look but made with one rect with a pattern.
<svg width="700" height="300">
<defs>
<pattern id="pattern-stripe4" patternUnits="userSpaceOnUse" patternTransform="rotate(135)" width="7" height="23">
<rect width="2" height="23" fill="yellow" x="0" y="0"></rect>
<rect width="5" height="23" fill="red" x="2" y="0"></rect>
</pattern>
</defs>
<g class="random-data-task" aria-selected="false" aria-describedby="task3">
<rect x="53" y="50" width="341" height="23" class="random-data-bar" fill="url(#pattern-stripe4)" style="stroke: #00f400; opacity: 1;"></rect>
</g>
</svg>
To prevent the modification of the pattern rects:
do not select rects without a class designation, the rects in the pattern are also selected and updated
select rect based on class or as sub elements of a particular group
For axample
svg.selectAll(".bars")......
svg.select(".bargroup").selectAll("rect").....
So the goal here is to have a 2 color diagonal hatch pattern that can be rotated to arbitrary angles dynamically (fyi it's being applied to a D3 map w/zooming).
I found the "SVG Pattern Contains Whitespace Between Repetitions in Firefox(1) question, however the solution is not very flexible rotation-wise and I couldn't make it work with the 2 colors bars.
Here's a jsfiddle test case.. The first 4 are my technique rotated differently. The last one is an attempt to adapt follow the previously mentioned answer's advice.
Chrome renders it fine(2) (as does Safari and IE).
But Firefox has these nasty lines where it tiles, but only when the pattern is rotated to something other than 90deg increments.
Any ideas?
Here's the contents of the Jsfiddle:
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg xml:space="preserve" width="925" height="810" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="hatch" width="10" height="10" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="0" y2="10" style="stroke:black; stroke-width:16" />
<line x1="13" y1="0" x2="13" y2="10" style="stroke:gray; stroke-width:16" />
</pattern>
<pattern id="hatch45" width="10" height="10" patternTransform="rotate(5 0 0)" patternUnits="userSpaceOnUse">
<line x1="-2" y1="-2" x2="-2" y2="12" style="stroke:black; stroke-width:16" overflow="visible" />
<line x1="12" y1="-2" x2="12" y2="12" style="stroke:gray; stroke-width:16" overflow="visible" />
</pattern>
<pattern id="hatch80" width="10" height="10" patternTransform="rotate(80 0 0)" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="0" y2="10" style="stroke:black; stroke-width:16" />
<line x1="13" y1="0" x2="13" y2="10" style="stroke:gray; stroke-width:16" />
</pattern>
<pattern id="hatch90" width="10" height="10" patternTransform="rotate(90 0 0)" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="0" y2="10" style="stroke:black; stroke-width:16" />
<line x1="13" y1="0" x2="13" y2="10" style="stroke:gray; stroke-width:16" />
</pattern>
<pattern x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" id="line-fill" viewBox="0 0 20 20" overflow="visible" patternTransform="rotate(80 0 0)">
<g stroke-width="20">
<line x1="0" y1="-10" x2="0" y2="30" stroke="black" />
<line x1="20" y1="-10" x2="20" y2="30" stroke="gray" />
</g>
</pattern>
</defs>
<g>
<rect style="fill:url(#hatch45);" x="10" y="0" width="200" height="130" />
<rect style="fill:url(#hatch80);" x="10" y="150" width="200" height="130" />
<rect style="fill:url(#hatch90);" x="10" y="300" width="200" height="130" />
<rect style="fill:url(#hatch);" x="10" y="450" width="200" height="130" />
<rect style="fill:url(#line-fill);" x="10" y="600" width="200" height="130" />
</g>
</svg>
1: stackoverflow.com/questions/19391071/svg-pattern-contains-whitespace-between-repetitions-in-firefox
2: imgur.com/c8SxdGG
I have the following:
<svg id="svggraph">
<g transform="translate(50,10)">
<text fill="brown" font-size="30px" font-family="sans-serif" height="20" width="25" y="30" x="0" style="text-decoration:underline">A</text>
<text fill="brown" font-size="30px" font-family="sans-serif" height="20" width="25" y="30" x="22" style="text-decoration:underline">B</text>
<text fill="brown" font-size="30px" font-family="sans-serif" height="20" width="25" y="30" x="44" style="text-decoration:underline">C</text>
<text fill="brown" font-size="30px" font-family="sans-serif" height="20" width="25" y="30" x="66" style="text-decoration:underline">D</text>
<rect style="stroke: black;" height="25" width="20" y="40" x="0" id="checkins1"></rect><rect style="stroke: black;" height="25" width="20" y="40" x="22" id="builds2"></rect>
<rect style="stroke: black;" height="25" width="20" y="40" x="44" id="oss3">
</rect><rect style="stroke: black;" height="25" width="20" y="40" x="66" id="appsec4"></rect><rect
</svg>
I would like to fetch all the rectangles from this svg. I am trying the following:
var svgdata = d3.select("#svggraph");
var svgrectdata = svgdata.selectAll("rect");
However i am not getting the rect data. I need to fetch all the rectangles so that i can loop through the rect and based on ids i can change the color.