Jump to content
You must now use your email address to sign in [click for more info] ×

Export to SVG with filters instead of image reference


Recommended Posts

 

I will admit that my familiarity with use and defs proves limited at this point in time. In an effort to make it easier for plebs like me, could you export it as a similar svg filter object? 

When I use Affinity to export a project to SVG it exports anything with a Layer Effect as: 

<use id="Square-2-On" serif:id="Square 2 On" xlink:href="#_Image1" x="288.16" y="485.161" width="64.275px" height="83.71px" transform="matrix(0.988839,0,0,0.996549,0,0)"/>
<defs>
    <image id="_Image1" width="65px" height="84px" xlink:href="data:image/png;base64,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"/>
</defs>

Currently I want to use it in d3 and, due to my ineptitude of either d3 or the underlying SVG, I cannot get it to work correctly. It would be nice to export this as a general svg format (I don't know how to explain this...) but as SVG and not an image. 
If you have the time, and if it doesn't cause misfortune or the project manager to have a stroke, can you add this feature?

Example of the same image with out the sweetness:

<g id="_87" serif:id="87" transform="matrix(0.522181,0,0,0.522181,216.702,382.197)">
    <path d="M223.005,256.375L223.005,327.42L161.455,291.884L161.455,220.839L223.005,256.375Z" style="fill:rgb(121,238,249);"/>
</g>
Link to comment
Share on other sites

I think I'm right in saying, adding Layer FX will rasterise any vector.

What are you trying to achieve visually?

Upload an example, you can also add code so that we can look at that code using the <>
1636094319_ScreenShot2019-05-25at08_58_31.png.c95313cf297550e3ca2bde706bf5de8d.png 

	<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE
svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%"
height="100%" viewBox="0 0 52 126" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
xmlns:serif="http://www.serif.com/"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;
stroke-miterlimit:1.41421;"><rect x="0" y="0" width="51.976"
height="51.976" style="fill:#f20d0d;"/><use xlink:href="#_Image1"
x="0" y="72.945" width="51.976px" height="52.755px"
transform="matrix(0.999538,0,0,0.995383,5.68434e-14,-2.84217e-14)"/><
defs><image id="_Image1" width="52px" height="53px"
xlink:href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAADQAAAA1CAYAAAAOJMhOAAAACXBIWXMAAA7EAAAOxAGVK
w4bAAAC4klEQVRoge2a0Y7iOBBFTxknQNOwtEbT3zL//zLS/
sN8QjPNAAGS2HcfymlG09I+W7u5UslGcqI6Kds83LK/
N5tvT2ZsQ2AbAk8hsAwBzDxq05RXjNC2sNnAfg9fv8LrK/
Egfe8BciYCjRktYNPDtckMQvCIEZrG530P7+/
EN4kBCMBK4gmwafFiUR9UCJ7XauXV2W5huYSc4Xh0oBGIwJPELgRfsF77GIK/
qBawCWa3g5cXz/Nygbc3uFyIPyUS0AAbib3kZdzt4PnZ57XAmD1ye32FL198q/
34AV0Hv34RTxICVsBW4pgS55R4Bv8aMdYF1LaP7bZew/UKp5NH1xE7wCTOwFnilBKH+
53N5eJnqbYKta3Pl0sYRzgc4Hh0sL4n9hKNGTfgBnQSp77n0HXsJRZN83hZDWoaB4GPbc
b57FtvHIkJGEsMEr3EPWe6vqcJgSYlzIwacAxox/
FRKcmhhgFSAokoYIpcxiSRJIacsQJUg8wMS4lmHB1iGLxaOfsCiTgt1p+j9PgtUYumvJA
+B/5/+p/
SDFS7ZqDaNQPVrhmods1AtWsGql0zUO2agWrXDFS7ZqDaNQPVrhmods1AtWsGql0zUO36
fwHVY3P9oX8x4CJ8TvzDppTcMavEkkQi/zb/
3bmb9MljzbjHOubMmBJAVaYxwGoY3PUuzjc5f4DFDOTSHjOY0UvccqYr1nkMoQoY8A8bQ
yDlzN7Mne+U3DwuUDEBA9ADN4nOjHPOMAxcU2JRSXUmLcw43e909zsvlwtrM+
h7lJJ3lE1AV+CMd2QB3FKizbmqa9DwW6w1473v+Xm9sguBNdAUSz+
OEtmMhcSxPHiTWJnRSFUCNWasc2abEn+
ZsTNjY8barHSSTDdZ6Z27AK1ErGy7TUBRYm3GVuJkxosZezO2ZsRAOUMFKknc8HazUF5S
G1TEj0ZXepRGIOE3dFyWyky33WBGLouCVBUM+
EdeAKMZKvnFEg3wD71Xg2MBeRSjAAAAAElFTkSuQmCC"/></defs></svg>

svg example with fx.svg The svg has a rectangle with no layer fx and one with a 3D layer fx applied, if you look at the More settings on the export panel it will have an option to rasterise unsupported properties, telling it not to will remove (ignore) any layer fx from that object.

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

  • 3 weeks later...

I would prefer a non-rasterised version of the filter layers similar to the example below. I tried to recreate it but ended up going back to the image tag instead.

Example svg in prod: https://audiozoa.band/#/3dsquare

I attempted to recreate it with a filter but could not get it to look the same so I reverted back to the image. The rasterised image looks fine but it isn't scaleable (which is also fine). I just would prefer it to be for other application.

<button (click)="random()">Random</button>

<span *ngFor="let n of amount(101)">
  {{n}} |
</span>

<div style="display: flex; justify-content: center; margin-top: 40px">
  <svg width="30%" height="20%" viewBox="0 0 400 650" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">

  <!-- Holder of the full square -->
  <g id="Square-0" serif:id="Square 0" transform="matrix(3.23953,0,0,3.23953,-140.702,-645.488)">


    <g id="x1"></g>
    <g id="x2" transform="matrix(1,0,0,1,12.9212,8.7665)"> </g>
    <g id="x3" transform="matrix(1,0,0,1,25.8424,17.4988)"></g>
    <g id="x4" transform="matrix(1,0,0,1,38.7636,26.2653)"></g>
    <g id="x5" transform="matrix(1,0,0,1,51.6849,34.9976)"></g>
    <g id="x6" transform="matrix(1,0,0,1,64.6061,43.7641)"></g>
    <g id="x7" transform="matrix(1,0,0,1,77.5273,52.4964)"></g>
    <g id="x8" transform="matrix(1,0,0,1,90.4485,61.2629)"></g>

    <g *ngIf="false" id="_8" serif:id="8" transform="matrix(0.16119,0,0,0.16119,31.0512,270.426)">
      <!-- The svg way to do it. Doesn't look as good -->
      <g transform="matrix(1,0,0,1,-54,0)">
        <path id="example" d="M223.005,256.375L223.005,327.42L161.455,291.884L161.455,220.839L223.005,256.375Z" style="fill:rgb(121,238,249); filter: url(#glow);"></path>
        <path id="example" d="M223.005,256.375L223.005,327.42L161.455,291.884L161.455,220.839L223.005,256.375Z" style="fill:transparent; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 3;  filter: url(#dope);" stroke="white" stroke-width="2"></path>
      </g>
    </g>
  </g>

  <g id="Square-Test-On" serif:id="Square 2 On" transform="matrix(3.23953,0,0,3.23953,-140.702,-645.488)"></g>

  <defs>
    <image id="light" width="53px" height="77px" xlink:href="data:image/png;base64,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"/>

    <filter id="dope" width="300%" height="300%" x="-75%" y="-75%">
      <feMorphology operator="dilate" radius="3" in="SourceAlpha" result="thicken"></feMorphology>
      <feGaussianBlur stdDeviation="5" result="coloredBlur"></feGaussianBlur>
      <feFlood flood-color="rgb(121,238,249)" result="glowColor"></feFlood>
      <feComposite in="glowColor" in2="coloredBlur" operator="in" result="softGlow_colored"></feComposite>
      <feMerge>
        <feMergeNode in="softGlow_colored"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>

    <filter id="glow" width="300%" height="300%" x="-75%" y="-75%">
      <feMorphology operator="dilate" radius="4" in="SourceAlpha" result="thicken"></feMorphology>
      <feGaussianBlur stdDeviation="8" result="coloredBlur"></feGaussianBlur>
      <feFlood flood-color="rgb(121,238,249)" result="glowColor"></feFlood>
      <feComposite in="glowColor" in2="coloredBlur" operator="in" result="softGlow_colored"></feComposite>
      <feMerge>
        <feMergeNode in="softGlow_colored"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
  </defs>
</svg>
</div>

 

Background angular/typescript code

 

import {Component, OnInit} from '@angular/core';
import {SquareFaceFactory} from '../domain/three-dsquare/square-face-factory.model';
import {SquareFaceDirection} from '../domain/three-dsquare/square-face-direction.enum';
import {SquareFace} from '../domain/three-dsquare/square-face.model';
import {generateInclusiveRange} from '../common/helpers/range';
import {SquareLightFactory} from '../domain/three-dsquare/square-light-factory.model';

import * as d3 from 'd3';
import {SquareLight} from '../domain/three-dsquare/square-light.model';

@Component({
  selector: 'app-three-dsquare',
  templateUrl: './three-dsquare.component.html',
  styleUrls: ['./three-dsquare.component.sass']
})
export class ThreeDSquareComponent implements OnInit {

  squareFaceConfig = [
    { transform: 'matrix(0.16119,0,0,0.16119,31.0512,270.426)', y: '8' },
    { transform: 'matrix(0.16119,0,0,0.16119,31.0512,255.97)',  y: '7' },
    { transform: 'matrix(0.16119,0,0,0.16119,31.0512,241.514)', y: '6' },
    { transform: 'matrix(0.16119,0,0,0.16119,31.0512,227.058)', y: '5' },
    { transform: 'matrix(0.16119,0,0,0.16119,31.0512,212.757)', y: '4' },
    { transform: 'matrix(0.16119,0,0,0.16119,31.0512,198.301)', y: '3' },
    { transform: 'matrix(0.16119,0,0,0.16119,31.0512,183.845)', y: '2' },
    { transform: 'matrix(0.16119,0,0,0.16119,31.0512,169.389)', y: '1' }
  ];

  squareFaceFactory = SquareFaceFactory.configure(
    'M223.005,185.277L284.554,220.813L284.554,291.884L223.005,327.42L161.455,291.884L161.455,220.813L223.005,185.277Z',
    'M223.005,256.375L223.005,327.42L161.455,291.884L161.455,220.839L223.005,256.375Z',
    'M284.554,291.884L223.005,327.42L223.005,256.375L284.554,220.839L284.554,291.884Z',
    'rgb(134,5,130)',
    'rgb(134,5,78)',
    'rgb(87,5,134)',
    'matrix(1,0,0,1,-54,0)'
  );

  squareLightFactory = SquareLightFactory.configure(
    'matrix(0.308686,-0,-0,0.308686,45.9024,199.254)',
    '#light',
    'matrix(0.987474,0,0,0.99982,0,0)',
    '41.474px',
    '64.988px'
  );

  yStart = 8;
  xStart = 0;

  yDiff = 28.5;
  xDiff = 46.6;

  xSpace = 42.25;

  // can generate dynamically - refactor
  x1 = this.getFirstColumn(this.xStart, 1);
  x2 = this.getFirstColumn(this.xStart, 2);
  x3 = this.getFirstColumn(this.xStart, 3);
  x4 = this.getFirstColumn(this.xStart, 4);
  x5 = this.getFirstColumn(this.xStart, 5);
  x6 = this.getFirstColumn(this.xStart, 6);
  x7 = this.getFirstColumn(this.xStart, 7);
  x8 = this.getFirstColumn(this.xStart, 8);

  // can generate dynamically - refactor
  y1 = this.getFirstRow(this.yStart, 1);
  y2 = this.getFirstRow(this.yStart, 2);
  y3 = this.getFirstRow(this.yStart, 3);
  y4 = this.getFirstRow(this.yStart, 4);
  y5 = this.getFirstRow(this.yStart, 5);
  y6 = this.getFirstRow(this.yStart, 6);
  y7 = this.getFirstRow(this.yStart, 7);
  y8 = this.getFirstRow(this.yStart, 8);

  blank = [];

  // can generate dynamically - refactor
  electricLights = {
    11: this.squareLightFactory.build(this.x1, this.getY(this.y1, 1), '11'),
    12: this.squareLightFactory.build(this.x1, this.getY(this.y2, 1), '12'),
    13: this.squareLightFactory.build(this.x1, this.getY(this.y3, 1), '13'),
    14: this.squareLightFactory.build(this.x1, this.getY(this.y4, 1), '14'),
    15: this.squareLightFactory.build(this.x1, this.getY(this.y5, 1), '15'),
    16: this.squareLightFactory.build(this.x1, this.getY(this.y6, 1), '16'),
    17: this.squareLightFactory.build(this.x1, this.getY(this.y7, 1), '17'),
    18: this.squareLightFactory.build(this.x1, this.getY(this.y8, 1), '18'),

    21: this.squareLightFactory.build(this.x2, this.getY(this.y1, 2), '21'),
    22: this.squareLightFactory.build(this.x2, this.getY(this.y2, 2), '22'),
    23: this.squareLightFactory.build(this.x2, this.getY(this.y3, 2), '23'),
    24: this.squareLightFactory.build(this.x2, this.getY(this.y4, 2), '24'),
    25: this.squareLightFactory.build(this.x2, this.getY(this.y5, 2), '25'),
    26: this.squareLightFactory.build(this.x2, this.getY(this.y6, 2), '26'),
    27: this.squareLightFactory.build(this.x2, this.getY(this.y7, 2), '27'),
    28: this.squareLightFactory.build(this.x2, this.getY(this.y8, 2), '28'),

    31: this.squareLightFactory.build(this.x3, this.getY(this.y1, 3), '31'),
    32: this.squareLightFactory.build(this.x3, this.getY(this.y2, 3), '32'),
    33: this.squareLightFactory.build(this.x3, this.getY(this.y3, 3), '33'),
    34: this.squareLightFactory.build(this.x3, this.getY(this.y4, 3), '34'),
    35: this.squareLightFactory.build(this.x3, this.getY(this.y5, 3), '35'),
    36: this.squareLightFactory.build(this.x3, this.getY(this.y6, 3), '36'),
    37: this.squareLightFactory.build(this.x3, this.getY(this.y7, 3), '37'),
    38: this.squareLightFactory.build(this.x3, this.getY(this.y8, 3), '38'),

    41: this.squareLightFactory.build(this.x4, this.getY(this.y1, 4), '41'),
    42: this.squareLightFactory.build(this.x4, this.getY(this.y2, 4), '42'),
    43: this.squareLightFactory.build(this.x4, this.getY(this.y3, 4), '43'),
    44: this.squareLightFactory.build(this.x4, this.getY(this.y4, 4), '37'),
    45: this.squareLightFactory.build(this.x4, this.getY(this.y5, 4), '45'),
    46: this.squareLightFactory.build(this.x4, this.getY(this.y6, 4), '37'),
    47: this.squareLightFactory.build(this.x4, this.getY(this.y7, 4), '47'),
    48: this.squareLightFactory.build(this.x4, this.getY(this.y8, 4), '37'),

    51: this.squareLightFactory.build(this.x5, this.getY(this.y1, 5), '51'),
    52: this.squareLightFactory.build(this.x5, this.getY(this.y2, 5), '52'),
    53: this.squareLightFactory.build(this.x5, this.getY(this.y3, 5), '53'),
    54: this.squareLightFactory.build(this.x5, this.getY(this.y4, 5), '54'),
    55: this.squareLightFactory.build(this.x5, this.getY(this.y5, 5), '41'),
    56: this.squareLightFactory.build(this.x5, this.getY(this.y6, 5), '56'),
    57: this.squareLightFactory.build(this.x5, this.getY(this.y7, 5), '41'),
    58: this.squareLightFactory.build(this.x5, this.getY(this.y8, 5), '41'),

    61: this.squareLightFactory.build(this.x6, this.getY(this.y1, 6), '61'),
    62: this.squareLightFactory.build(this.x6, this.getY(this.y2, 6), '62'),
    63: this.squareLightFactory.build(this.x6, this.getY(this.y3, 6), '63'),
    64: this.squareLightFactory.build(this.x6, this.getY(this.y4, 6), '51'),
    65: this.squareLightFactory.build(this.x6, this.getY(this.y5, 6), '65'),
    66: this.squareLightFactory.build(this.x6, this.getY(this.y6, 6), '51'),
    67: this.squareLightFactory.build(this.x6, this.getY(this.y7, 6), '51'),
    68: this.squareLightFactory.build(this.x6, this.getY(this.y8, 6), '68'),

    71: this.squareLightFactory.build(this.x7, this.getY(this.y1, 7), '71'),
    72: this.squareLightFactory.build(this.x7, this.getY(this.y2, 7), '72'),
    73: this.squareLightFactory.build(this.x7, this.getY(this.y3, 7), '73'),
    74: this.squareLightFactory.build(this.x7, this.getY(this.y4, 7), '74'),
    75: this.squareLightFactory.build(this.x7, this.getY(this.y5, 7), '51'),
    76: this.squareLightFactory.build(this.x7, this.getY(this.y6, 7), '51'),
    77: this.squareLightFactory.build(this.x7, this.getY(this.y7, 7), '51'),
    78: this.squareLightFactory.build(this.x7, this.getY(this.y8, 7), '78'),

    81: this.squareLightFactory.build(this.x8, this.getY(this.y1, 8), '81'),
    82: this.squareLightFactory.build(this.x8, this.getY(this.y2, 8), '82'),
    83: this.squareLightFactory.build(this.x8, this.getY(this.y3, 8), '83'),
    84: this.squareLightFactory.build(this.x8, this.getY(this.y4, 8), '51'),
    85: this.squareLightFactory.build(this.x8, this.getY(this.y5, 8), '51'),
    86: this.squareLightFactory.build(this.x8, this.getY(this.y6, 8), '86'),
    87: this.squareLightFactory.build(this.x8, this.getY(this.y7, 8), '87'),
    88: this.squareLightFactory.build(this.x8, this.getY(this.y8, 8), '88')
  };

  one = [
    this.electricLights['11'],
    this.electricLights['25'],
    this.electricLights['47'],
    this.electricLights['52'],
    this.electricLights['74'],
    this.electricLights['88']
  ];

  two = [
    this.electricLights['12'],
    this.electricLights['21'],
    this.electricLights['45'],
    this.electricLights['54'],
    this.electricLights['78'],
    this.electricLights['87']
  ];

  three = [
    this.electricLights['13'],
    this.electricLights['26'],
    this.electricLights['31'],
    this.electricLights['34'],
    this.electricLights['37'],
    this.electricLights['43'],
    this.electricLights['62'],
    this.electricLights['56'],
    this.electricLights['65'],
    this.electricLights['68'],
    this.electricLights['73'],
    this.electricLights['86']
  ];

  four = [
    this.electricLights['41'],
    this.electricLights['22'],
    this.electricLights['14'],
    this.electricLights['58'],
    this.electricLights['77'],
    this.electricLights['85']
  ];

  five = [
    this.electricLights['15'],
    this.electricLights['27'],
    this.electricLights['48'],
    this.electricLights['51'],
    this.electricLights['72'],
    this.electricLights['84']
  ];

  six = [
    this.electricLights['16'],
    this.electricLights['23'],
    this.electricLights['32'],
    this.electricLights['35'],
    this.electricLights['38'],
    this.electricLights['46'],
    this.electricLights['53'],
    this.electricLights['61'],
    this.electricLights['64'],
    this.electricLights['67'],
    this.electricLights['76'],
    this.electricLights['83']
  ];

  seven = [
    this.electricLights['17'],
    this.electricLights['28'],
    this.electricLights['44'],
    this.electricLights['55'],
    this.electricLights['71'],
    this.electricLights['82']
  ];

  eight = [
    this.electricLights['18'],
    this.electricLights['24'],
    this.electricLights['42'],
    this.electricLights['57'],
    this.electricLights['75'],
    this.electricLights['81']
  ];

  nine = [
    this.electricLights['33'],
    this.electricLights['66'],
    this.electricLights['63'],
    this.electricLights['36'],
  ];

  squareLightBoxes = [
    this.squareLightFactory.build(this.x8, '207', '71')
  ];

  x = [
    0, 42, 84, 126, 168, 210, 252, 294
  ];

  constructor() {
    console.log('WTF', this.squareLightFactory);
  }

  ngOnInit() {
    this.generate();
    // this.turnOnBlocks(Object.values(this.electricLights));
    // this.testBlur();
    // this.random();

    this.turnOnBlocks(this.nine);
  }

  getY(n: number, m: number) {
    return `${n + this.yDiff * (m - 1)}`;
  }

  getFirstRow(n: number, m: number) {
    return n + this.xDiff * (m - 1);
  }

  getFirstColumn(n: number, m: number) {
    return `${n + this.xSpace * (m - 1)}`;
  }

  amount(n: number) {
    return [n, n + 28.5, n + (2 * 28.5), n + (3 * 28.5), n + (4 * 28.5), n + (5 * 28.5), n + (6 * 28.5), n + (7 * 28.5)]
  }

  testBlur() {
    // d3.select('#example').style('filter', 'url(#dope)');
  }

  /** Builds a column of squares */
  buildColumn(x: number) {
    const c1 = d3.select(`#x${x}`);

    const columnBuilder = (config: { transform: string, y: string }) => {
      const xyConfigurations = `${x}${config.y}`;

      // order needs to stay TOP first due to layering
      const squareFaces: SquareFace[] = [
        this.squareFaceFactory.build(xyConfigurations, SquareFaceDirection.TOP),
        this.squareFaceFactory.build(xyConfigurations, SquareFaceDirection.LEFT),
        this.squareFaceFactory.build(xyConfigurations, SquareFaceDirection.RIGHT)
      ];

      // 1. creates a group
      c1.append('g')
      // 2. adds id with the x and y coordinates.  limits: (1 - 8)    examples: c1s1, c5s2, c8c8
        .attr('id', `x${x}y${config.y}`)
        // 3. moves the group by as specific amount - see matrix transformation
        .attr('transform', config.transform)
        // 4. adds 3 groups for each side of the square (set of square faces)
        .selectAll(`#x${x} g`)
        // 5. builds a square group using the xy coordinates for an id (11, 52, 88) and a position
        .data(squareFaces).enter().append('g')
          // 6. adds id from the square face to the group
          .attr('id', d => d.id)
          // 7. adds the transform position (relative to the parents transform)
          .attr('transform', d => d.transform)
          // 8. adds the xy coordinates as the class
          .attr('class', d => d.position)
          // 9. adds the path which draws the actual shape
          .append('path')
            // 10. adds the path coordinates to the path object which it will draw from
            .attr('d', d => d.pathCoordinates)
            // 11. adds the color to the path
            .attr('fill', d => d.fill)
        .exit();
    };

    this.squareFaceConfig.forEach(columnBuilder);
  }

  random() {
    const rand = Math.floor(Math.random() * Math.floor(10));

    const data = rand === 1 ? this.one :
                 rand === 2 ? this.two :
                 rand === 3 ? this.three :
                 rand === 4 ? this.four :
                 rand === 5 ? this.five :
                 rand === 6 ? this.six :
                 rand === 7 ? this.seven :
                 rand === 8 ? this.eight :
                 rand === 9 ? this.nine : [];

    this.clearLights();

    this.turnOnBlocks(data);
  }

  clearLights() {
    d3.select('#Square-Test-On').selectAll('g').remove();
  }

  turnOnBlocks(boxes: SquareLight[]) {
    // 1. gets all/appends group for each box in the data
    d3.select('#Square-Test-On').selectAll('g')
      // 2. adds the data as a set of light coordinates
      .data(boxes)
      .enter().append('g')
    	// 3. adds the lights id
        .attr('id', d => d.id)
    	// 4. adds the transformation matrix
        .attr('transform', this.squareLightFactory.groupMatrixTransform)
    	// 5. adds class
        .attr('class', 'lit')
    	// 6. appends a <use> tag
        .append('use')
    	  // 7. adds the image link to the use tag
          .attr('xlink:href', this.squareLightFactory.usedReference)
    	  // 8. adds the x coordinate
          .attr('x', d => d.x)
    	  // 9. adds the y coordinate
          .attr('y', d => d.y)
    	  // 10. adds the width
          .attr('width', d => d.width)
    	  // 11. adds the height
          .attr('height', d => d.height)
    	  // 12. adds the transform matrix
          .attr('transform', d => d.matrixTransform);
  }

  generate() {
    generateInclusiveRange(8, 1).forEach(i => {
      console.log('index', i);

      this.buildColumn(i);
    });
  }
}

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.