css - Can I have a SVG Pattern with background color? -
i have svg polygons , polygons use pattern fill. want background color pattern. pattern on background color.
var pattern = me.canvas.append('defs') .append('pattern') .attr('id', 'diagonalhatch') .attr('patternunits', 'userspaceonuse') .attr('width', 4) .attr('height', 4) .append('path') .attr('d', 'm-1,1 l2,-2 m0,4 l4,-4 m3,5 l2,-2') .attr('stroke', '#010101') .attr('stroke-width', 1) .attr("opacity",0.5); var polyobj = polygonlayer.append("polygon") .attr('stroke','black') .attr('stroke-width','2') .style('fill','url(#diagonalhatch)'); i have fiddle. want color behind pattern.
please help.
as had mentioned in comment, 1 way add 4x4 rect inside pattern (before path) , give rect required fill.
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <head> <div id='mydiv'></div> <script type="text/javascript"> var canvas = d3.select('#mydiv') .append('svg') .attr('width', '400px') .attr('height', '400px'); canvas.append('defs') .append('pattern') .attr('id', 'diagonalhatch') .attr('patternunits', 'userspaceonuse') .attr('width', 4) .attr('height', 4) .append('rect') .attr('width', 4) .attr('height', 4) .attr('x', 0) .attr('x', 0) .attr('fill', 'blue'); d3.select('#mydiv svg pattern#diagonalhatch').append('path') .attr('d', 'm-1,1 l2,-2 m0,4 l4,-4 m3,5 l2,-2') .attr('stroke', '#010101') .attr('stroke-width', 1) .attr("opacity", 0.5); var polygon = canvas.append('polygon') .attr('fill', 'none').attr('points', '282.0000915527344,104,280.0001220703125,165.00009155273438,349,174.99998474121094,345.00006103515625,105.99999237060547,282.0000915527344,104') .attr('stroke', 'black') .attr('stroke-width', '2') .style('fill', 'url(#diagonalhatch)') </script> </head> <body> </body>below demo actual code:
/* map menu controls */ .ui-active rect { fill: #212121 } .ui-active text { fill: #fff } .ui-default rect { fill: #e6e6e6 } .ui-default text { fill: #000 } .map-controls { display: none; } /* heatmap colors (courtesy of colorbrewer2.org) */ .rdylbu .d6-6 { fill: #d73027; background: #d73027; color: #121212 } .rdylbu .d6-5 { fill: #fc8d59; background: #fc8d59; color: #121212 } .rdylbu .d6-4 { fill: #fee090; background: #fee090; color: #121212 } .rdylbu .d6-3 { fill: #e0f3f8; background: #e0f3f8; color: #121212 } .rdylbu .d6-2 { fill: #91bfdb; background: #91bfdb; color: #121212 } .rdylbu .d6-1 { fill: #4575b4; background: #4575b4; color: #121212 } /* overlays */ .polygon { stroke: white; stroke-width: 2px; fill-opacity: 0.2 } .vertex { stroke: lime; stroke-width: 2px; fill: none } /* vector field */ .vector { stroke-width: 1px; stroke: lightsteelblue } /* path plot */ .pathplot path { stroke-width: 2px; stroke: steelblue; fill: #e0e0e0; opacity: 0.4; } .planned { stroke-dasharray: 9, 5 } /* grid lines*/ .grid .tick line { stroke: #e3e3e3; opacity: 1; } .pathplot line { stroke-width: 2px; stroke: steelblue; stroke-dasharray: 15, 5; } .overlays line { stroke-width: 4px; stroke: steelblue } .overlays path { stroke-width: 2px; stroke: steelblue; fill: none } .heatmap .d0 { fill: #d73027; stroke: null; opacity: 0.5; } .heatmap .d1 { fill: #fc8d59; stroke: null; opacity: 0.5; } .heatmap .d2 { fill: #fee090; ; stroke: null; opacity: 0.5; } .heatmap .d3 { fill: #e0f3f8; ; stroke: null; opacity: 0.5; } .heatmap .d4 { fill: #91bfdb; ; stroke: null; opacity: 0.5; } .heatmap .d5 { fill: #4575b4; ; stroke: null; opacity: 0.5; } .overlays .perimeter { stroke-width: 2px; stroke: steelblue; stroke-dasharray: 10, 2; } /*wall types*/ .overlays .cubicle { stroke-width: 2px; stroke: #2f6299 } .overlays .bookshelf { stroke-width: 2px; stroke: #86471e } .overlays .brickwall { stroke-width: 4px; stroke: #ff0000; } .overlays .drywall { stroke-width: 2px; stroke: #948a54; } .overlays .thindoor { stroke-width: 2px; stroke: #e36c0a; } .overlays .thickdoor { stroke-width: 3px; stroke: #e36c0a; } .overlays .concrete { stroke-width: 4px; stroke: #a9abaa; } .overlays .elevatorshaft { stroke-width: 6px; stroke: #262626; } .overlays .thinwindow { stroke-width: 2px; stroke: #ffc000; } .overlays .thickwindow { stroke-width: 3px; stroke: #ffc000; } .overlays .wrap { stroke-width: 10px; stroke-opacity: 0; } .hmbands {} .hidebands { display: none !important; } .selector_radius { fill: transparent; } .selector_radius.selected { stroke-width: 5px; stroke: red; stroke-dasharray: 3, 2; } .coverage_radius { stroke-width: 1px; stroke: black; stroke-dasharray: 3, 2 } .coverage_radius.selected { stroke-width: 3px; stroke: red; stroke-dasharray: 5, 4; } .background-floorplan { opacity: 0.15; } .heatmap { opacity: 0.25 } svg { cursor: pointer; } svg .grid .tick { opacity: 0.3; } svg text { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .maindrawingpage { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } svg text::selection { background: none; } .axis path { stroke: black; fill: none; } .axis line { fill: none; stroke: black; } .axis .axis-line { fill: solid; stroke: black; } /* tooltip */ .nvtooltip, .nvtooltip * { font-family: tahoma, arial, verdana, sans-serif; font-size: 10px; } .nvtooltip .missing { color: #ff0000; } .nvtooltip { position: absolute; background-color: rgba(255, 255, 255, 1); padding: 5px; border: 1px solid #ddd; z-index: 100000; -moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, .5); -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, .5); box-shadow: 4px 4px 8px rgba(0, 0, 0, .5); -moz-border-radius: 5px; border-radius: 5px; pointer-events: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: rgba(255, 255, 255, 0.6); } .nvtooltip h3 { margin: 0; padding: 0; text-align: center; display: inline; } .nvtooltip p { margin: 0; padding: 0; text-align: center; } .aplabeltext { /*font-weight: bold !important; */ font-size: 10px; } .xaxesdivcls { max-height: 350px; max-width: 500px; overflow: hidden } .yaxesdivcls { max-height: 350px; max-width: 500px; /* overflow:hidden; */ position: relative; top: -352px } .canvasdivcls { /* max-height:370px; */ /* max-width:480px; */ /* overflow:auto; */ position: relative; top: -702px } .addimagebtncls { position: relative; top: -700px; left: 250px; } }<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script type="text/javascript"> function appendpolygon() { debugger; var canvas = d3.select('.fp-overlays-1419951398667'); canvas.append('defs') .append('pattern') .attr('id', 'diagonalhatch') .attr('patternunits', 'userspaceonuse') .attr('width', 4) .attr('height', 4) .append('rect') .attr('width', 4) .attr('height', 4) .attr('x', 0) .attr('x', 0) .attr('fill', 'white'); d3.select('svg pattern#diagonalhatch').append('path') .attr('d', 'm-1,1 l2,-2 m0,4 l4,-4 m3,5 l2,-2') .attr('stroke', '#010101') .attr('stroke-width', 1) .attr("opacity", 0.5); var polygon = canvas.append('polygon') .attr('fill', 'none').attr('points', '282.0000915527344,104,280.0001220703125,165.00009155273438,349,174.99998474121094,345.00006103515625,105.99999237060547,282.0000915527344,104') .attr('stroke', 'black') .attr('stroke-width', '2') .style('fill', 'url(#diagonalhatch)') } </script> <body> <div id='xaxesdiv' class="xaxesdivcls"> <svg height="500px" width="700px"> <g class="x axis" transform="translate(100,50)"> <g class="tick" transform="translate(0,0)" style="opacity: 1;"> <line y2="-6" x2="0"></line> <text y="-9" x="0" dy="0em" style="text-anchor: middle;">0</text> </g> <g class="tick" transform="translate(72.60000000000001,0)" style="opacity: 1;"> <line y2="-6" x2="0"></line> <text y="-9" x="0" dy="0em" style="text-anchor: middle;">100</text> </g> <g class="tick" transform="translate(145.20000000000002,0)" style="opacity: 1;"> <line y2="-6" x2="0"></line> <text y="-9" x="0" dy="0em" style="text-anchor: middle;">200</text> </g> <g class="tick" transform="translate(217.79999999999998,0)" style="opacity: 1;"> <line y2="-6" x2="0"></line> <text y="-9" x="0" dy="0em" style="text-anchor: middle;">300</text> </g> <g class="tick" transform="translate(290.40000000000003,0)" style="opacity: 1;"> <line y2="-6" x2="0"></line> <text y="-9" x="0" dy="0em" style="text-anchor: middle;">400</text> </g> <g class="tick" transform="translate(363,0)" style="opacity: 1;"> <line y2="-6" x2="0"></line> <text y="-9" x="0" dy="0em" style="text-anchor: middle;">500</text> </g> <path class="domain" d="m0,-6v0h363v-6"></path> <line x1="-70" class="axis-line" y1="0" x2="0" y2="0"></line> </g> </svg> </div> <div id='yaxesdiv' class="yaxesdivcls"> <svg height="500px" width="700px"> <g class="y axis" transform="translate(50,100)"> <g class="tick" transform="translate(0,0)" style="opacity: 1;"> <line x2="-6" y2="0"></line> <text x="-9" y="0" dy=".32em" style="text-anchor: end;">0</text> </g> <g class="tick" transform="translate(0,72)" style="opacity: 1;"> <line x2="-6" y2="0"></line> <text x="-9" y="0" dy=".32em" style="text-anchor: end;">100</text> </g> <g class="tick" transform="translate(0,144)" style="opacity: 1;"> <line x2="-6" y2="0"></line> <text x="-9" y="0" dy=".32em" style="text-anchor: end;">200</text> </g> <g class="tick" transform="translate(0,216)" style="opacity: 1;"> <line x2="-6" y2="0"></line> <text x="-9" y="0" dy=".32em" style="text-anchor: end;">300</text> </g> <g class="tick" transform="translate(0,288)" style="opacity: 1;"> <line x2="-6" y2="0"></line> <text x="-9" y="0" dy=".32em" style="text-anchor: end;">400</text> </g> <g class="tick" transform="translate(0,360)" style="opacity: 1;"> <line x2="-6" y2="0"></line> <text x="-9" y="0" dy=".32em" style="text-anchor: end;">500</text> </g> <path class="domain" d="m-6,0h0v360h-6"></path> <text x="-25" y="-60" style="font-size: 12px; font-family: helvetica, arial, sans-serif; text-anchor: middle;">f</text> <line x1="0" class="axis-line" y1="-70" x2="0" y2="0"></line> </g> </svg> </div> <div id='canvasdiv' class="canvasdivcls"> <svg height="500px" width="650px"> <g class="map-layers" width="363" height="360" x="0" y="0"> <rect class="canvas" pointer-events="all" style="opacity: 0;"></rect> <g class="maplayer gridaxislayer"> <g class="fp-gridaxislayer-1419951398667"> <g class="grid" transform="translate(100,100)"> <g class="tick" transform="translate(0,0)" style="opacity: 1;"> <line y2="360" x2="0"></line> <text y="-3" x="0" dy="0em" style="text-anchor: middle;"></text> </g> <g class="tick" transform="translate(72.60000000000001,0)" style="opacity: 1;"> <line y2="360" x2="0"></line> <text y="-3" x="0" dy="0em" style="text-anchor: middle;"></text> </g> <g class="tick" transform="translate(145.20000000000002,0)" style="opacity: 1;"> <line y2="360" x2="0"></line> <text y="-3" x="0" dy="0em" style="text-anchor: middle;"></text> </g> <g class="tick" transform="translate(217.79999999999998,0)" style="opacity: 1;"> <line y2="360" x2="0"></line> <text y="-3" x="0" dy="0em" style="text-anchor: middle;"></text> </g> <g class="tick" transform="translate(290.40000000000003,0)" style="opacity: 1;"> <line y2="360" x2="0"></line> <text y="-3" x="0" dy="0em" style="text-anchor: middle;"></text> </g> <g class="tick" transform="translate(363,0)" style="opacity: 1;"> <line y2="360" x2="0"></line> <text y="-3" x="0" dy="0em" style="text-anchor: middle;"></text> </g> <path class="domain" d="m0,0v0h363v0"></path> </g> <g class="grid" transform="translate(100,100)"> <g class="tick" transform="translate(0,0)" style="opacity: 1;"> <line x2="363" y2="0"></line> <text x="-3" y="0" dy=".32em" style="text-anchor: end;"></text> </g> <g class="tick" transform="translate(0,72)" style="opacity: 1;"> <line x2="363" y2="0"></line> <text x="-3" y="0" dy=".32em" style="text-anchor: end;"></text> </g> <g class="tick" transform="translate(0,144)" style="opacity: 1;"> <line x2="363" y2="0"></line> <text x="-3" y="0" dy=".32em" style="text-anchor: end;"></text> </g> <g class="tick" transform="translate(0,216)" style="opacity: 1;"> <line x2="363" y2="0"></line> <text x="-3" y="0" dy=".32em" style="text-anchor: end;"></text> </g> <g class="tick" transform="translate(0,288)" style="opacity: 1;"> <line x2="363" y2="0"></line> <text x="-3" y="0" dy=".32em" style="text-anchor: end;"></text> </g> <g class="tick" transform="translate(0,360)" style="opacity: 1;"> <line x2="363" y2="0"></line> <text x="-3" y="0" dy=".32em" style="text-anchor: end;"></text> </g> <path class="domain" d="m0,0h0v360h0"></path> </g> </g> </g> <g class="maplayer overlays"> <g class="fp-overlays-1419951398667"> <g id="perimeterlayerid"> </g> </g> </g> </g> </svg> </div> <div> </div> <script> appendpolygon(); </script> </body>
Comments
Post a Comment