Fix updating attributes on SVG elements. Fixes #934 and #1114

src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Rendering/BrowserRenderer.ts

@@ -79,7 +79,7 @@ export class BrowserRenderer {
           const frame = batch.referenceFramesEntry(referenceFrames, frameIndex);
           const siblingIndex = editReader.siblingIndex(edit);
           const element = getLogicalChild(parent, childIndexAtCurrentDepth + siblingIndex);
-          if (element instanceof HTMLElement) {
+          if (element instanceof Element) {
             this.applyAttribute(batch, componentId, element, frame);
           } else {
             throw new Error(`Cannot set attribute on non-element child`);

test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/ComponentRenderingTest.cs

@@ -306,6 +306,10 @@ namespace Microsoft.AspNetCore.Blazor.E2ETest.Tests
 
             var svgCircleElement = appElement.FindElement(By.XPath("//*[local-name()='circle' and namespace-uri()='http://www.w3.org/2000/svg']"));
             Assert.NotNull(svgCircleElement);
+            Assert.Equal("10", svgCircleElement.GetAttribute("r"));
+
+            appElement.FindElement(By.TagName("button")).Click();
+            WaitAssert.Equal("20", () => svgCircleElement.GetAttribute("r"));
         }
 
         [Fact]

test/testapps/BasicTestApp/SvgComponent.cshtml

@@ -1,3 +1,9 @@
-<svg height="250" width="250">
-    <circle cx="125" cy="125" r="100" fill="red" stroke="black" stroke-width="3" />
-</svg>
+<svg height="250" width=250>
+    <circle cx="125" cy="125" r=@radius fill="red" stroke="black" stroke-width="3" />
+</svg>
+
+<button onclick=@(() => { radius *= 2; })>Click me</button>
+
+@functions {
+    int radius = 10;
+}