如何在 kotlin-react 中使用 SVG答案

【问题标题】：How to use SVG with kotlin-react如何在 kotlin-react 中使用 SVG
【发布时间】：2018-02-03 10:33:44
【问题描述】：

您好，有人可以帮我如何在 Kotlin React 中使用 SVG。

我想使用 react 和 javascript 实现与以下示例类似的事情：

const MyComponent = ({radius, color}) => (
  <svg width={radius * 2} height={radius * 2}>
    <circle cx={radius} cy={radius} r={radius} fill=  {color}/>
  </svg>
)

很遗憾，我自己无法找到任何示例或足够的文档。

使用 Kotlin，我不知道我可以使用哪些语言功能来实现相同的目标。谁能帮助我使用 Kotlin 填写以下 sn-p 信息？

fun RBuilder.MyComponent(radius: Int, color: String) {
  svg {
     ...
  }
}

非常感谢。

【问题讨论】：

标签： reactjs kotlin

【解决方案1】：

在撰写本文时，Kotlin 似乎没有类似于 kotlinx.html 的 svg 库。话虽如此，通过逆向工程 kotlin-react 和 kotlinx.html 交互的方式，可以在 kotlin-react 中创建任意 xml。或者只使用基本反应函数。

方法一：使用kotlinx.html

import kotlinx.html.HTMLTag 
import react.*
import react.dom.*

// a custom tag builder, reuses the tag(...) function from kotlin-react and HTMLTag from kotlinx.html
inline fun RBuilder.custom(tagName: String, block: RDOMBuilder<HTMLTag>.() -> Unit): ReactElement = tag(block) {
    HTMLTag(tagName, it, mapOf(), null, true, false) // I dont know yet what the last 3 params mean... to lazy to look it up
}

// example use
inline fun RBuilder.mySVG(animTime: Double) {
    svg() {
        attrs["width"] = "800"
        attrs["height"] = "600"
        attrs["viewBox"] = "0 0 800 600"

        custom("circle") {
            attrs["cx"] = 150
            attrs["cy"] = 150
            attrs["r"] = 50.0 + sin(animTime) * 50.0
            attrs["style"] = object {
                val stroke = "black"
                val fill = "red"
            }
        }
    }
}

方法2：使用react.dom中的child和createElement

open class CircleProps (
    val cx: Int,
    val cy: Int,
    val r: Int,
    val stroke: String,
    val fill: String,
    val strokeWidth: Int
    ): RProps {
}

inline fun RBuilder.mySVG2(animTime: Double) {
svg() {
    attrs["width"] = "800"
    attrs["height"] = "600"
    attrs["viewBox"] = "0 0 800 600"

    child(createElement("circle", CircleProps(150,150, 50.0 + sin(animTime) * 50.0, "black", "blue", 3)))
}

【讨论】：

【解决方案2】：

我不确定如何在 Kotlin/React 文件中内联编写 SVG，但是，JetBrain 自己的示例显示 how to load an external SVG file in Kotlin-React。

@JsModule("src/logo/react.svg")
external val reactLogo: dynamic
@JsModule("src/logo/kotlin.svg")
external val kotlinLogo: dynamic

fun RBuilder.logo(height: Int = 100) {
    div("Logo") {
        attrs.jsStyle.height = height
        img(alt = "React logo.logo", src = reactLogo, classes = "Logo-react") {}
        img(alt = "Kotlin logo.logo", src = kotlinLogo, classes = "Logo-kotlin") {}
    }
}

如果您确实知道如何内联，请在此处为社区发布该解决方案，谢谢。

【讨论】：

【解决方案3】：

所有已在react.dom.svg.ReactSVG 对象中声明的 SVG 组件

circle 现在错过了 - I will add it（快速 WA 问题）

path example

【讨论】：