Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Can I have a SVG Pattern with background color?

Tags:

css

svg

d3.js

I have SVG Polygons and for some polygons I use a pattern as fill. But I want a background color to that pattern. Like a pattern over a 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 this fiddle. I want a color behind this pattern.

Please help.

like image 640
Harshal Avatar asked May 25 '16 06:05

Harshal

1 Answers

As I had mentioned in my comment, one way would be to add a 4x4 rect inside the pattern (before the path) and then give the rect the 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 is a demo with your 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>
like image 135
Harry Avatar answered Oct 24 '22 04:10

Harry
Sign in to Comment

Related questions

Font Awesome need inverse
Apply a CSS hue rotate filter to a greyscale image
HTML fixed header bar when scroll
How to add an additional css class from code behind using ASP.NET?
Why is setTimeout needed when applying a class for my transition to take effect?
Applying CSS to single characters dynamically?
Sass Keyframes animation mixin generating invalid CSS
Javascript element style
style pressed button in JavaFX
full width background color inside container bootstrap
How to make divs stack without spaces and retain order on smaller sizes - in Bootstrap
Table Cell two color background diagonally
Caption font color with kable
Setting body height to 100%
D3: change font size of axis labels
How to resize the Bootstrap DatePicker?
How to rotate SVG text with css
How to listen on <select> change events in materialize css
CSS Card Flip in Safari
Box with a triangle like a chat

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!