Question

我有一条为字母P创建边框形状的路径，换句话说，路径的孔是字母P。我对整个元素使用透明的背景（此处仅包含其中一部分）。

我很好奇我是否只能以某种方式修改该特定路径的背景，因此结果将是带有彩色字母P-（例如红色）。

我尝试使用fill-rule，根据定义，它可以满足我的需要，但无法解决问题。

fill-rule属性是一个演示属性，用于定义确定形状内部的算法。

    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 width="400px" height="300px" viewBox="700 600 600 700" enable-background="new 0 0 2000 2000" xml:space="preserve">
    <g>
    	<path fill="#1E1F4E" d="M845.19,914.329H691.147c-4.745,0-8.592,3.847-8.592,8.592v154.041c0,4.747,3.847,8.593,8.592,8.593H845.19
    		c4.745,0,8.591-3.846,8.591-8.593V922.921C853.781,918.176,849.935,914.329,845.19,914.329z M802.316,996.693
    		c-7.187,6.827-17.346,10.241-30.474,10.241c-3.215,0-6.694-0.23-10.436-0.689c-3.741-0.46-7.745-1.149-12.011-2.068v38.89
    		c0,8.403,0.917,13.622,2.756,15.654c2.494,2.89,6.268,4.331,11.323,4.331h5.12v3.645h-57.204v-3.645h5.021
    		c5.646,0,9.682-1.834,12.111-5.512c1.312-2.033,1.968-6.859,1.968-14.474v-86.249c0-8.401-0.885-13.618-2.657-15.654
    		c-2.56-2.886-6.367-4.331-11.422-4.331h-5.021v-3.643h48.933c11.946,0,21.366,1.23,28.257,3.693
    		c6.893,2.46,12.701,6.613,17.427,12.453c4.726,5.843,7.09,12.768,7.09,20.775C813.098,981.005,809.503,989.866,802.316,996.693z"/>
    	<path fill="#1E1F4E" d="M777.062,944.856c-4.332-2.462-9.255-3.693-14.768-3.693c-3.347,0-7.648,0.626-12.898,1.871v55.53
    		c3.478,0.656,6.562,1.149,9.255,1.478c2.689,0.328,4.986,0.493,6.892,0.493c6.825,0,12.715-2.643,17.673-7.927
    		c4.955-5.283,7.433-12.125,7.433-20.528c0-5.776-1.182-11.141-3.545-16.098C784.741,951.026,781.395,947.317,777.062,944.856z"/>
    </g>
</svg>

Answer 1

我删除了fill属性，并使用css设置g组的填充。我已经将viewBox属性更改为组的大小。现在，当您将鼠标悬停在svg元素上时，可以更改组的填充。请让我知道您是否需要svg元素和您一样大。在这种情况下，您可能需要在P后面添加一个矩形。

g{fill:#1E1F4E;}
svg:hover g{fill:red;}

    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 width="100" viewBox="682.55 914.33 171.22 171.22">
    <g>
    	<path  d="M845.19,914.329H691.147c-4.745,0-8.592,3.847-8.592,8.592v154.041c0,4.747,3.847,8.593,8.592,8.593H845.19
    		c4.745,0,8.591-3.846,8.591-8.593V922.921C853.781,918.176,849.935,914.329,845.19,914.329z M802.316,996.693
    		c-7.187,6.827-17.346,10.241-30.474,10.241c-3.215,0-6.694-0.23-10.436-0.689c-3.741-0.46-7.745-1.149-12.011-2.068v38.89
    		c0,8.403,0.917,13.622,2.756,15.654c2.494,2.89,6.268,4.331,11.323,4.331h5.12v3.645h-57.204v-3.645h5.021
    		c5.646,0,9.682-1.834,12.111-5.512c1.312-2.033,1.968-6.859,1.968-14.474v-86.249c0-8.401-0.885-13.618-2.657-15.654
    		c-2.56-2.886-6.367-4.331-11.422-4.331h-5.021v-3.643h48.933c11.946,0,21.366,1.23,28.257,3.693
    		c6.893,2.46,12.701,6.613,17.427,12.453c4.726,5.843,7.09,12.768,7.09,20.775C813.098,981.005,809.503,989.866,802.316,996.693z"/>
    	<path  d="M777.062,944.856c-4.332-2.462-9.255-3.693-14.768-3.693c-3.347,0-7.648,0.626-12.898,1.871v55.53
    		c3.478,0.656,6.562,1.149,9.255,1.478c2.689,0.328,4.986,0.493,6.892,0.493c6.825,0,12.715-2.643,17.673-7.927
    		c4.955-5.283,7.433-12.125,7.433-20.528c0-5.776-1.182-11.141-3.545-16.098C784.741,951.026,781.395,947.317,777.062,944.856z"/>
    </g>
</svg>

OP正在评论：

我说的是给字母P着色，而不是边框。

在这种情况下，我更改了路径，以便您将字母作为路径

g{fill:#fff;}
svg:hover g{fill:red;}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 width="100" viewBox="682.55 914.33 171.22 171.22">
      
      <path fill="#1E1F4E"  d="M845.19,914.329H691.147c-4.745,0-8.592,3.847-8.592,8.592v154.041c0,4.747,3.847,8.593,8.592,8.593H845.19
    		c4.745,0,8.591-3.846,8.591-8.593V922.921C853.781,918.176,849.935,914.329,845.19,914.329z" />
<g>
    	<path  d="M802.316,996.693
    		c-7.187,6.827-17.346,10.241-30.474,10.241c-3.215,0-6.694-0.23-10.436-0.689c-3.741-0.46-7.745-1.149-12.011-2.068v38.89
    		c0,8.403,0.917,13.622,2.756,15.654c2.494,2.89,6.268,4.331,11.323,4.331h5.12v3.645h-57.204v-3.645h5.021
    		c5.646,0,9.682-1.834,12.111-5.512c1.312-2.033,1.968-6.859,1.968-14.474v-86.249c0-8.401-0.885-13.618-2.657-15.654
    		c-2.56-2.886-6.367-4.331-11.422-4.331h-5.021v-3.643h48.933c11.946,0,21.366,1.23,28.257,3.693
    		c6.893,2.46,12.701,6.613,17.427,12.453c4.726,5.843,7.09,12.768,7.09,20.775C813.098,981.005,809.503,989.866,802.316,996.693z
                M777.062,944.856c-4.332-2.462-9.255-3.693-14.768-3.693c-3.347,0-7.648,0.626-12.898,1.871v55.53
    		c3.478,0.656,6.562,1.149,9.255,1.478c2.689,0.328,4.986,0.493,6.892,0.493c6.825,0,12.715-2.643,17.673-7.927
    		c4.955-5.283,7.433-12.125,7.433-20.528c0-5.776-1.182-11.141-3.545-16.098C784.741,951.026,781.395,947.317,777.062,944.856z"/>
</g>
</svg>

SVG-填充路径的孔（透明部分）

1 个答案: