huahaofeng
/
aspnetcore
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added SVG support (#366) (#435) 

* Added SVG support (#366)

* Added E2E tests for SVG
This commit is contained in:
Stephen Roe 2018-03-30 10:07:10 +01:00 committed by Steve Sanderson
parent 5b658c80a1
commit cda3692d0b
6 changed files with 41 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Rendering/BrowserRenderer.ts
View File

@ -115,7 +115,9 @@ export class BrowserRenderer {
insertElement(componentId: number, parent: Element, childIndex: number, frames: System_Array<RenderTreeFramePointer>, frame: RenderTreeFramePointer, frameIndex: number) {
const tagName = renderTreeFrame.elementName(frame)!;
const newDomElement = document.createElement(tagName);
const newDomElement = tagName === 'svg' || parent.namespaceURI === 'http://www.w3.org/2000/svg' ?
document.createElementNS('http://www.w3.org/2000/svg', tagName) :
document.createElement(tagName);
insertNodeIntoDOM(newDomElement, parent, childIndex);
// Apply attributes
@ -149,7 +151,9 @@ export class BrowserRenderer {
// (counting child components as a single item), so N will rarely if ever be large.
// We could even keep track of whether all the child components happen to have exactly 1
// top level frames, and in that case, there's no need to sum as we can do direct lookups.
const containerElement = document.createElement('blazor-component');
const containerElement = parent.namespaceURI === 'http://www.w3.org/2000/svg' ?
document.createElementNS('http://www.w3.org/2000/svg', 'g') :
document.createElement('blazor-component');
insertNodeIntoDOM(containerElement, parent, childIndex);
// All we have to do is associate the child component ID with its location. We don't actually

24
test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/ComponentRenderingTest.cs
View File

@ -228,5 +228,29 @@ namespace Microsoft.AspNetCore.Blazor.E2ETest.Tests
externalComponentButton.Click();
Assert.Equal("It works", externalComponentButton.Text);
}
[Fact]
public void CanRenderSvgWithCorrectNamespace()
{
var appElement = MountTestComponent<SvgComponent>();
var svgElement = appElement.FindElement(By.XPath("//*[local-name()='svg' and namespace-uri()='http://www.w3.org/2000/svg']"));
Assert.NotNull(svgElement);
var svgCircleElement = appElement.FindElement(By.XPath("//*[local-name()='circle' and namespace-uri()='http://www.w3.org/2000/svg']"));
Assert.NotNull(svgCircleElement);
}
[Fact]
public void CanRenderSvgChildComponentWithCorrectNamespace()
{
var appElement = MountTestComponent<SvgWithChildComponent>();
var svgElement = appElement.FindElement(By.XPath("//*[local-name()='svg' and namespace-uri()='http://www.w3.org/2000/svg']"));
Assert.NotNull(svgElement);
var svgCircleElement = appElement.FindElement(By.XPath("//*[local-name()='circle' and namespace-uri()='http://www.w3.org/2000/svg']"));
Assert.NotNull(svgCircleElement);
}
}
}

1
test/testapps/BasicTestApp/SvgCircleComponent.cshtml Normal file
View File

@ -0,0 +1 @@
<circle cx="125" cy="125" r="100" fill="red" stroke="black" stroke-width="3" />

3
test/testapps/BasicTestApp/SvgComponent.cshtml Normal file
View File

@ -0,0 +1,3 @@
<svg height="250" width="250">
<circle cx="125" cy="125" r="100" fill="red" stroke="black" stroke-width="3" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 123 B

5
test/testapps/BasicTestApp/SvgWithChildComponent.cshtml Normal file
View File

@ -0,0 +1,5 @@
<h1>SVG with Child Component</h1>
<svg height="250" width="250">
<SvgCircleComponent />
</svg>

2
test/testapps/BasicTestApp/wwwroot/index.html
View File

@ -24,6 +24,8 @@
<option value="BasicTestApp.HttpClientTest.HttpRequestsComponent">HttpClient tester</option>
<option value="BasicTestApp.BindCasesComponent">@bind cases</option>
<option value="BasicTestApp.ExternalContentPackage">External content package</option>
<option value="BasicTestApp.SvgComponent">SVG</option>
<option value="BasicTestApp.SvgWithChildComponent">SVG with child component</option>
<!--<option value="BasicTestApp.RouterTest.Default">Router</option> Excluded because it requires additional setup to work correctly when loaded manually -->
</select>
&nbsp;