SVGで部分だけ指定したいです

前提・実現したいこと

SVGで中身だけ斜めにしたいです。

発生している問題・エラーメッセージ

全体が斜めになってしまいます。

該当のソースコード

この吹き出しのSVGで、斜めにしたいのは「＋」の部分です。これを「×」にしたいです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="demo-files/demo.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-add_comment" viewBox="0 0 24 24">
<path d="M17.016 11.016v-2.016h-4.031v-3.984h-1.969v3.984h-4.031v2.016h4.031v3.984h1.969v-3.984h4.031zM21.984 3.984v18l-3.984-3.984h-14.016q-0.797 0-1.383-0.609t-0.586-1.406v-12q0-0.797 0.586-1.383t1.383-0.586h16.031q0.797 0 1.383 0.586t0.586 1.383z"></path>
</symbol>
</defs>
</svg>

<svg class="icon icon-add_comment"><use xlink:href="#icon-add_comment"></use></svg>
</body>
</html>

試したこと

CSSで斜めにするプロパティとして「transform」を見つけたのですが、SVGの「＋」の部分だけの指定がわからず、「吹き出し」の部分まで斜めになってしまいます。

.icon {
    transform: rotate(45deg);
}

どうやったら「×」にできますか？

行動規範の内容に同意します

回答1件

ベストアンサー

path要素のd属性は、M〜zまでが一つのパスです。

SVGの記述方法まとめ | cly7796.net

そのsvgの場合、2つのパスが合わさって＋の吹き出し図形となっているようです。M〜zまで切り取ることで、２つのパスに分解することが出来ます。


<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-add_comment" viewBox="0 0 24 24">
  <path d="M21.984 3.984v18l-3.984-3.984h-14.016q-0.797 0-1.383-0.609t-0.586-1.406v-12q0-0.797 0.586-1.383t1.383-0.586h16.031q0.797 0 1.383 0.586t0.586 1.383z"></path>
  <path d="M17.016 11.016v-2.016h-4.031v-3.984h-1.969v3.984h-4.031v2.016h4.031v3.984h1.969v-3.984h4.031z" fill="white"></path>
</symbol>
</defs>
</svg>

DEMO

<path d="M17.016 11.016v-2.016h-4.031v-3.984h-1.969v3.984h-4.031v2.016h4.031v3.984h1.969v-3.984h4.031z" fill="white"></path>が、プラスの部分のパスになるので、この部分にtransformおよびtransform-originを当てて下さい。

投稿2020/04/08 13:56