Question

我正在创建一个Vue应用程序，该应用程序从另一个网站（通过Wordpress REST API）提取内容，并且无法将SVG加载到Vue组件中，以便可以通过CSS和JS对其进行操作。

到目前为止，这是我的组件：

<template>
    <div id="svg-siteplan"></div>
</template>

<script>
    import axios from 'axios';

    export default {
    name: 'svgsitemap',
    props: ['svgurl'],
    data() {
        return {
            svgerror: '',
            svgContent: '',
        };
    },
    methods: {
        getContent() {
            $('.plot-outline').hide();
            $('.plot-status').css({
                fill: '#ff6600',
            });
        },
        outputContents() {
            axios.get(`${this.svgurl}`)
            .then((response) => {
                this.svgContent = response.data;
                $('#svg-siteplan').html(this.svgContent);
            })
            .catch((err) => {
                this.svgerror = err.data;
            });
        },
    },
    mounted() {
        this.outputContents();
        this.getContent();
    },
};


</script>

<style lang="scss" scoped>
    .plot-status {
        fill: deepPink;
        transition: fill .3s ease-out;
        stroke: #444444;
    }
</style>

该组件在父组件的svgurl循环中通过源URL（v-for）传递，例如http://example.com/uplaods/my-svg.svg

这将显示SVG，但我无法使用CSS或javascript操作它。

如果我仅复制SVG代码并将其粘贴到组件中，则可以对其进行操作，但是使用v-html="svgurl"或使用axios / ajax来获取文件并将其附加到div会停止此操作。 / p>

正在WordPress网站上操作SVG，Vue应用程序从该网站提取内容，但是要在该网站上显示SVG，我可以使用file_get_contents()。 javascript / Vue中是否有类似的功能可以输出SVG文件的内容？

谢谢。

Vue从外部链接获取可编辑的内联SVG

0 个答案: