Edge on Widows 10 crashing when pattern is created

[tomekole]

The following code, creating pattern, is crashing Edge browser (version: Edge/18.18363 ) and Excel web addin using Edge as webview. There is no javascript error, it just crashes and adds error to Windows event log.

var pattern = this.svg.pattern(6, 6, add => {
      add.rect(1.2, 6).translate(0, 0).fill("black")
}).attr("patternTransform", "rotate(45)");

It is working as expected in IE11, Chrome and Firefox.

Windows event log error:

- <Event xmlns="http://schemas.microsoft.com/win/2004/08/events/event">
- <System>
  <Provider Name="Application Error" /> 
  <EventID Qualifiers="0">1000</EventID> 
  <Level>2</Level> 
  <Task>100</Task> 
  <Keywords>0x80000000000000</Keywords> 
  <TimeCreated SystemTime="2020-02-13T23:08:25.481980900Z" /> 
  <EventRecordID>39376</EventRecordID> 
  <Channel>Application</Channel> 
  <Computer>NKODE</Computer> 
  <Security /> 
  </System>
- <EventData>
  <Data>MicrosoftEdgeCP.exe</Data> 
  <Data>11.0.18362.1</Data> 
  <Data>ceb8cbe1</Data> 
  <Data>edgehtml.dll</Data> 
  <Data>11.0.18362.657</Data> 
  <Data>cfbb3b0e</Data> 
  <Data>c0000005</Data> 
  <Data>0000000000ca166d</Data> 
  <Data>9278</Data> 
  <Data>01d5e2c27e2dc4e3</Data> 
  <Data>C:\Windows\System32\MicrosoftEdgeCP.exe</Data> 
  <Data>C:\Windows\SYSTEM32\edgehtml.dll</Data> 
  <Data>c3234682-5adb-41c3-b804-2727d9777081</Data> 
  <Data>Microsoft.MicrosoftEdge_44.18362.449.0_neutral__8wekyb3d8bbwe</Data> 
  <Data>MicrosoftEdge</Data> 
  </EventData>
  </Event>

[Fuzzyma]

I feel like that is not an issue with svg.js but more like with edge. How are we supposed to fix that? :D You might want to file a bug report to microsoft even thouugh its unlikely that they will ever fix that...

As a side note: You can use rotate(45) on pattern, too!

[tomekole]

It seems that the issue is caused by translate(0, 0) inside the pattern which is rendered as transform="matrix(1,0,0,1,0,0)"

I removed translate() from the rect /as it seems not needed inside the pattern/ and it is working in Edge.

Working code:

 var pattern = this.svg.pattern(6, 6, add => {
       add.rect(1.2, 6).fill("black")
     }).rotate(45);

Thanks for the tip. Learning svg and svgjs :)

[Fuzzyma]

Yes translating by zero is not doing anything. I thought there was some special meaning behind it... Cool that you fixed it!