Question

你可以帮助我吗：我有svg文件： FILE_SVG 从Illustrator导出。我指定的目标是为它添加“悬停”效果（可能是Zomm效果或颜色变化），但最后文件将上传到公司的Sharepoint上运行的Intranet站点。我用CSS制作了它，但内部模板正在切割整个css部分/代码。

据我所知，可以使用Javascript完成... Cany你帮助我或者提供一个外部链接开始（为业余爱好者）。谢谢你的帮助...

Answer 1

如果您的内部模板正在削减自定义CSS，那么它也可能会削减您的自定义JavaScript。据我所知，你不能将悬停效果嵌入到SVG中。但是，如果您可以访问HTML和CSS或JavaScript，那么请从以下内容开始并进行实验。

所以你需要有三个文件。

你的SVG
您的HTML
你的CSS

class Store{
    subject = new BehaviorSubject(0);
    get value(){
        return this.subject.getValue();
    }
    inc(){
        this.subject.next(this.subject.value+1);
    }
    dec(){
        this.subject.next(this.subject.value-1);
    }
    clear(){
        this.subject.next(0);
    }
}

class Demo extends React.Component<{}, {}>{
    store = new Store();
    componentWillMount(){
        this.store.subject.subscribe(_ => this.forceUpdate())
    }
    render(){
        const value = this.store.value;
        const { inc, dec, clear } = this.store;
        const store = this.store;
        return (
            <div>
                <span>{`current value is ${value}`}</span>
                <button onClick={inc.bind(store)}>INC</button>
                <button onClick={dec.bind(store)}>DEC</button>
                <button onClick={clear.bind(store)}>CLEAR</button>
            </div>
        );
    }
}

将其复制到HTML中，并在svg中添加id：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
</svg>

以及CSS中的类似内容：

<div class="svg-wrapper">
    <svg id="mySVG" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
    </svg>
</div>

如果您决定使用JavaScript而不是CSS，它将类似于：

#mySVG {
    width: 200px;
    height: 300px;
}
#mySVG:hover {
    width: 250px;
    height: 375px;
    fill: blue;
}

尝试使用本教程来使用SVG：https://css-tricks.com/using-svg/

尝试本教程了解JavaScript悬停事件：https://www.w3schools.com/jsref/event_onmouseover.asp

Answer 2

您可以使用SVG内置的SMIL动画功能实现悬停效果。 Sharepoint可能不会剥夺它。

＆＃13;

<svg>
  <circle cx="150" cy="75" r="50" fill="red">
    <set attributeName="fill" to="green" begin="mouseover" end="mouseout"/>
  </circle>
</svg>

＆＃13;

请注意，这在IE中不起作用。如果您是一个重要的MS工作场所，这可能是一个问题：）

在Sharepoint上托管时，Onmouseover在SVG中悬停效果

2 个答案: