SVGView

用 SwiftUI 编写的 SVG 解析器

SPM Compatible Cocoapods Compatible Carthage Compatible License: MIT

概述

这个项目的目标是将 SVG 的全部功能引入 Apple 平台。我们的框架可以解析 SVG 文件，并在 SwiftUI 中表示其内容。它不仅让您能够渲染 SVG 文件，还能够为其添加交互性、处理用户输入，并使用 SwiftUI 将您的艺术作品变为动态。

用法

只需几行代码即可开始使用 SVGView

struct ContentView: View {
    var body: some View {
        SVGView(contentsOf: Bundle.main.url(forResource: "example", withExtension: "svg")!)
    }
}

自定义

您可以像这样更改节点的各种参数

let circle = SVGCircle(cx: 30, cy: 30, r: 30)
circle.fill = SVGColor.black
circle.stroke = SVGStroke(fill: SVGColor(hex: "ABCDEF"), width: 2)
circle.onTapGesture {
    print("tap")
}

与矢量元素交互

您可以使用标准标识符来定位 SVG 文件的所需部分，以添加手势并在运行时更改其属性

struct ContentView: View {
    var body: some View {
        let view = SVGView(contentsOf: Bundle.main.url(forResource: "example", withExtension: "svg")!)
        if let part = view.getNode(byId: "part") {
            part.onTapGesture {
                part.opacity = 0.2
            }
        }
        return view
    }
}

动画

您可以使用标准的 SwiftUI 工具来动画您的图像

if let part = view.getNode(byId: "part") {
    part.onTapGesture {
        withAnimation {
            part.opacity = 0.2
        }
    }
}

复杂效果

SVGView 使您可以轻松地向您的应用添加自定义效果。例如，让这个皮卡丘跟踪手指移动

var body: some View {
    let view = SVGView(contentsOf: Bundle.main.url(forResource: "pikachu", withExtension: "svg")!)
    let delta = CGAffineTransform(translationX: getEyeX(), y: 0)
    view.getNode(byId: "eye1")?.transform = delta
    view.getNode(byId: "eye2")?.transform = delta

    return view.gesture(DragGesture().onChanged { g in
        self.x = g.location.x
    })
}

SVG 测试覆盖率

我们的使命是提供对所有 SVG 标准的 100% 支持：1.1（第二版）、Tiny 1.2 和 2.0。然而，这个项目还处于起步阶段，您可以在此页面上关注我们的进展。您还可以查看SVGViewTests 项目，了解此框架如何处理每个 SVG 测试用例。

安装

Swift Package Manager

dependencies: [
    .package(url: "https://github.com/exyte/SVGView.git")
]

CocoaPods

pod 'SVGView'

Carthage

github "Exyte/SVGView"

要求

我们其他的开源 SwiftUI 库

PopupView - Toast 和 Popup 库
Grid - 最强大的 Grid 容器
ScalingHeaderScrollView - 具有粘性标题的滚动视图，该标题在滚动时会缩小
AnimatedTabBar - 带有多个预设动画的标签栏
MediaPicker - 可定制的媒体选择器
Chat - 具有完全可定制的消息单元格、输入视图和内置媒体选择器的聊天 UI 框架
OpenAI OpenAI REST API 的包装器库 OpenAI REST API
AnimatedGradient - 动画线性渐变
ConcentricOnboarding - 动画 onboarding 流程
FloatingButton - 浮动按钮菜单
ActivityIndicatorView - 多个动画加载指示器
ProgressIndicatorView - 多个动画进度指示器
FlagAndCountryCode - 每个国家的电话代码和标志
LiquidSwipe - 流体导航动画