我有一個簡單的帶有人字形的 html 元素，我想在下拉串列更改時旋轉它，但是它不是自行旋轉，而是在人字形的尖端旋轉以改變位置，我嘗試使用轉換原點，但它仍然沒有作業，任何想法為什么？
html元素：
<div :class="[{ 'opened': isOpen }]">
<div
class="title"
@click="toggle()" //The toggle will just toggle the isOpen property
>
{{ title }}
</div>
</div>
css：
.title {
width: 100%;
position: relative;
margin-top: 5px;
padding-right: 1.5em;
&:after {
content: "";
background-image: url(data:image/svg xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'><path d='M1.9 13.8c-.1.1-.3.2-.5.2s-.4-.1-.5-.2l-.7-.7c-.1-.2-.2-.4-.2-.6s.1-.4.2-.5l4.7-5L.2 2c-.1-.1-.2-.3-.2-.5s.1-.4.2-.5L.9.3c.1-.2.3-.3.5-.3s.4.1.5.2l5.8 6.2c.2.2.3.4.3.6 0 .2-.1.4-.2.5l-5.9 6.3z' fill='!262674'/></svg>);
background-repeat: no-repeat;
position: absolute;
width: 1.5em;
height: 1em;
transition: transform .3s;
margin-top: 5px;
transform: rotate(90deg);
transform-origin: center;
top: calc(50% - .5em);
right: 0;
}
}
當下拉選單打開時：
.opened {
.title {
transition: rotate 300ms ease-in;
&:after {
content: "";
background-image: url(data:image/svg xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'><path d='M1.9 13.8c-.1.1-.3.2-.5.2s-.4-.1-.5-.2l-.7-.7c-.1-.2-.2-.4-.2-.6s.1-.4.2-.5l4.7-5L.2 2c-.1-.1-.2-.3-.2-.5s.1-.4.2-.5L.9.3c.1-.2.3-.3.5-.3s.4.1.5.2l5.8 6.2c.2.2.3.4.3.6 0 .2-.1.4-.2.5l-5.9 6.3z' fill='!262674'/></svg>);
background-repeat: no-repeat;
position: absolute;
width: 1.5em;
height: 1em;
transition: transform .3s;
margin-top: 5px;
transform: rotate(270deg);
transform-origin: center;
top: calc(50% - .5em);
right: 0;
}
}
}
uj5u.com熱心網友回復：
其:after寬度和高度與影像不完全一致，因此有一些透明的空白。我將寬度和高度設定為與 svg 比率匹配的像素值。還有一些其他的調整，以減少你的所有補償規則。
$('.title-container').click(function(){
$(this).toggleClass('opened');
});.title {
width: 300px;
position: relative;
margin-top: 5px;
padding-right: 1.5em;
background: #e2e2e2;
}
.title:after {
content: "";
background-image: url("data:image/svg xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'><path d='M1.9 13.8c-.1.1-.3.2-.5.2s-.4-.1-.5-.2l-.7-.7c-.1-.2-.2-.4-.2-.6s.1-.4.2-.5l4.7-5L.2 2c-.1-.1-.2-.3-.2-.5s.1-.4.2-.5L.9.3c.1-.2.3-.3.5-.3s.4.1.5.2l5.8 6.2c.2.2.3.4.3.6 0 .2-.1.4-.2.5l-5.9 6.3z' fill='!262674'/></svg>");
background-repeat: no-repeat;
position: absolute;
width: 12px;
height: 20px;
transition: transform .3s;
transform: rotate(90deg);
top: calc(50% - 10px);
right: 1rem;
transform-origin: center;
text-align: center;
}
.opened .title:after {
transform: rotate(270deg);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="title-container">
<div class="title">
<h2>TITLE</h2>
</div>
</div>uj5u.com熱心網友回復：
帶有 SMIL 影片的 Stylable SVG 版本，包裹在現代原生 Web 組件中：
<style>
svg-chevron { width: 99px; margin: 10px; cursor: pointer; background: pink }
svg-chevron[rotate="90"] { fill: green }
svg-chevron[rotate="270"] { fill: red }
</style>
<svg-chevron rotate=0></svg-chevron>
<svg-chevron rotate=90></svg-chevron>
<svg-chevron rotate=180 dur="2s"></svg-chevron>
<svg-chevron rotate=270></svg-chevron>
<svg-chevron></svg-chevron>
<script>
customElements.define("svg-chevron", class extends HTMLElement {
connectedCallback() {
this.style.display = "inline-block";
this.rotation = Number(this.getAttribute("rotate") || 90); // initial rotation
this.innerHTML = `<svg style="vertical-align:top" viewBox='0 0 140 140'><path d='m49 138c-1 1-3 2-5 2s-4-1-5-2l-7-7c-1-2-2-4-2-6s1-4 2-5l47-50-47-50c-1-1-2-3-2-5s1-4 2-5l7-6c1-2 3-3 5-3s4 1 5 2l58 62c2 2 3 4 3 6c0 2-1 4-2 5l-59 63z'>`
`<animateTransform type="rotate" from="${this.rotation} 70 70" to="${this.rotation} 70 70" dur="0.5s" additive="sum" repeatCount="once" fill="freeze" attributeType="xml" attributeName="transform"/></path></svg>`;
this.onclick = (evt) => (evt.preventDefault(), this.rotate());
}
rotate(deg = 180) {
let animate = this.querySelector("animateTransform");
animate.onend = (evt) => this.setAttribute("rotate", this.rotation);
animate.setAttribute("from", `${this.rotation} 70 70`);
this.rotation = (this.rotation deg) % 360;
animate.setAttribute("to", `${this.rotation} 70 70`);
animate.setAttribute("dur", this.getAttribute("dur") || ".5s");
animate.beginElement();
}
})
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312410.html
上一篇：影片SVG箭頭和z-index
下一篇：Python編碼和測驗