Question

我正在尝试使用CSS设置SVG元素的宽度和高度属性，而不是将它们内联，但我似乎无法在Firefox中使用它。

当我在元素上设置内联宽度/高度时，它没有问题。

 <rect x="10px" y="50px" fill="green" width="20px" height="20px" />

当我尝试使用CSS设置宽度/高度时，它适用于Chrome，但不适用于Firefox。

.box {
    width: 20px;
    height: 20px;
}

<rect class="box" x="50px" y="50px" fill="green" />

在firefox 43和36中尝试了同样的行为。
当我在firefox中检查丢失的SVG元素时，看起来CSS正在被应用，并且计算出的样式显示正确的宽度/高度值。
我希望我只是在做一些愚蠢的事情而Chrome只是“让它发挥作用”。我想尽可能避免浏览器特定的CSS。

JSFiddle examples

Answer 1

并非所有SVG元素属性都可以使用CSS设置样式。只有指定为“属性”的那些可以。请参阅SVG规范中的以下列表。

https://www.w3.org/TR/SVG/propidx.html

（开发中）SVG 2规范将允许使用CSS设置所有属性的样式。一些浏览器开始支持这一点。但是现在你将无法做到。

更新：并非所有属性都可以在SVG2中设置样式。 styleable presentation attributes is here。

列表

Answer 2

我始终将我的SVG包裹在public class customHandler extends BroadcastReceiver { private static final String TAG = "customHandler"; @Override public void onReceive(Context context, Intent intent) { String action = intent.getAction(); android.util.Log.d(TAG, "action=" + action); // Handle Push Message when opened if (action.equals(PBConstants.EVENT_MSG_OPEN)) { //Check for Pushbots Instance Pushbots pushInstance = Pushbots.sharedInstance(); if(!pushInstance.isInitialized()){ com.pushbots.push.utils.Log.d("Initializing Pushbots."); Pushbots.sharedInstance().init(context.getApplicationContext()); } //Clear Notification array if(PBNotificationIntent.notificationsArray != null){ PBNotificationIntent.notificationsArray = null; } HashMap<?, ?> PushdataOpen = (HashMap<?, ?>) intent.getExtras().get(PBConstants.EVENT_MSG_OPEN); android.util.Log.w(TAG, "User clicked notification with Message: " + PushdataOpen.get("message")); //Report Opened Push Notification to Pushbots if(Pushbots.sharedInstance().isAnalyticsEnabled()){ Pushbots.sharedInstance().reportPushOpened( (String) PushdataOpen.get("PUSHANALYTICS")); } //Start lanuch Activity String packageName = context.getPackageName(); Intent resultIntent = new Intent(context.getPackageManager().getLaunchIntentForPackage(packageName)); resultIntent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK| Intent.FLAG_ACTIVITY_CLEAR_TASK); resultIntent.putExtras(intent.getBundleExtra("pushData")); Pushbots.sharedInstance().startActivity(resultIntent); // Handle Push Message when received }else if(action.equals(PBConstants.EVENT_MSG_RECEIVE)){ HashMap<?, ?> PushdataOpen = (HashMap<?, ?>) intent.getExtras().get(PBConstants.EVENT_MSG_RECEIVE); android.util.Log.w(TAG, "User Received notification with Message: " + PushdataOpen.get("message")); } } }或<span>中，然后根据SVG本身调整该元素的大小。

<div>

在Firefox中使用CSS设置SVG元素宽度/高度属性

2 个答案: