Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

在小程序中使用cax如何支持操作svg #577

Closed
reslicma opened this issue Nov 13, 2020 · 6 comments
Closed

在小程序中使用cax如何支持操作svg #577

reslicma opened this issue Nov 13, 2020 · 6 comments

Comments

@reslicma
Copy link

reslicma commented Nov 13, 2020

您好,我目前遇到了一个需求,我需要在小程序中操作并且渲染svg。渲染目前没问题,但是我的svg是需要随用户的交互行为动态变化的,所以我需要一种方式,能动态的更改svg,或者说能像正常一样DOM式的操作svg,但是目前我都没有找到办法来做这件事。目前我只看到了用html渲染一个写死的字符串,还不能更改。希望得到解决方案,谢谢!

    const htmStr = `<svg width="300" height="220">
    <rect
      bindtap="tapHandler"
      height="110"
      width="110"
      style="stroke:#ff0000; fill: #ccccff"
      transform="translate(100 50) rotate(45 50 50)"
    ></rect>
  </svg>`

    renderSVG(
      html`${htmStr}`,
      'svg-a',
      this.$scope,
    )

本来我是希望这样,定义一个字符串,动态的修改字符串以达到我动态渲染的目的,发现这样的行为也不可以。

@w8w8w8
Copy link

w8w8w8 commented Jan 21, 2021

请问你的问题解决了么?

@reslicma
Copy link
Author

请问你的问题解决了么?

这个问题本身没有得到解决,但是我换了方案,没有采取这个库了。

@w8w8w8
Copy link

w8w8w8 commented Jan 21, 2021

请问你的问题解决了么?

这个问题本身没有得到解决,但是我换了方案,没有采取这个库了。

你能告诉我下,你是怎么解决的么?我目前也是遇到了这个问题
#588

@reslicma
Copy link
Author

请问你的问题解决了么?

这个问题本身没有得到解决,但是我换了方案,没有采取这个库了。

你能告诉我下,你是怎么解决的么?我目前也是遇到了这个问题
#588

我调研了一下,小程序端,目前,似乎还没能力能做到原生的SVG的DOM式的操作svg,也没发现有库能做到。我们的业务需求是做SVG地图,所以我们降级了方案,采取了App+H5的形式,H5是支持SVG的。

@w8w8w8
Copy link

w8w8w8 commented Jan 21, 2021

请问你的问题解决了么?

这个问题本身没有得到解决,但是我换了方案,没有采取这个库了。

你能告诉我下,你是怎么解决的么?我目前也是遇到了这个问题
#588

我调研了一下,小程序端,目前,似乎还没能力能做到原生的SVG的DOM式的操作svg,也没发现有库能做到。我们的业务需求是做SVG地图,所以我们降级了方案,采取了App+H5的形式,H5是支持SVG的。

哦,原来是这样的。谢谢了。

@dntzhang
Copy link
Collaborator

可以通过 svg.children 拿到所有子节点进行操作
https://github.com/Tencent/omi/tree/master/packages/cax#%E7%BA%BF%E6%80%A7%E8%BF%90%E5%8A%A8

@dntzhang dntzhang closed this as completed Oct 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants