NativeScript SVG

此插件在 NativeScript 6 中的类似版本可在 此处 获取

免责声明

此插件几乎完全基于 Victor Sossa 和 Juras Norkus 的源代码。
感谢你们的辛勤工作和贡献！

安装

ns plugin add @sergeymell/nativescript-svg

先决条件

在开始使用此插件之前，请确保您的 svg 图片已复制到构建中。这可以通过更新 webpack.config.js 完成。向 CopyWebpackPlugin 实例的目标添加此行

{ from: '**/*.svg', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },

使其看起来像这样

new CopyWebpackPlugin({
  patterns: [
    { from: 'assets/**', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
    { from: 'fonts/**', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
    { from: '**/*.jpg', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
    { from: '**/*.png', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
    { from: '**/*.svg', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
  ],
}),

用法

您可以使用与使用图像源相同的方式使用它。

** 有局限性：** - saveToFile 不起作用

API

ImageSourceSVGModule.fromResource(name: string): ImageSourceSVG

• 从指定的资源名称加载此实例。

ImageSourceSVGModule.fromFile(path: string): ImageSourceSVG

• 创建一个新的 ImageSourceSVG 实例，并从指定的文件加载它。

ImageSourceSVGModule.fromData(data: any): ImageSourceSVG

• 创建一个新的 ImageSourceSVG 实例，并从指定的资源名称加载它。

ImageSourceSVGModule.fromBase64(source: string): ImageSourceSVG

• 创建一个新的 ImageSourceSVG 实例，并从指定的资源名称加载它。

ImageSourceSVGModule.fromUrl(url: string): Promise:ImageSourceSVG

• 从提供的 URL 下载图像，并从中创建一个新的 ImageSourceSVG 实例。

您可以通过两种方式调用每个方法，例如

//from the svf file object
svgFile.loadFromResource(name: string): boolean  // synchronously
svgFile.fromResource(name: string): ImageSourceSVG //asynchronously

或

//from the svg module api
ImageSourceSVGModule.fromResource(name: string): ImageSourceSVG

从版本 1.1 开始实现类似图像标签的功能，例如

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:svg="@sergeymell/nativescript-svg" loaded="pageLoaded">
  <StackLayout>
    <!--svg image tag-->
    <svg:SVGImage src="~/image/nativescript.svg" height="100" />
    <svg:SVGImage src="https://media4.giphy.com/media/3uyIgVxP1qAjS/200.svg" height="200" />

    <!--normal image tag-->
    <Image src="~/images/logo.svg" stretch ="none" />
  </StackLayout>
</Page>

Angular 应用程序中的使用

导入 Angular 模块

import {NativeScriptSvgModule} from '@sergeymell/nativescript-svg/angular';

@NgModule({
    [
       ...,
       NativeScriptSvgModule
    ],
    ...
})
export class AppModule {}

在您的视图中使用自定义元素

<SVGImage src="~/images/nativescript.svg" width="256" height="256"></SVGImage>

更多信息

请参阅创建 svg 文件的最佳实践

• https://jwatt.org/svg/authoring/#doctype-declaration
• https://mdn.org.cn/en-US/docs/Web/SVG/Tutorial/Getting_Started

许可证

Apache 许可证版本 2.0